Menu
So I'm new to Angularjs, but I'm trying to write the code for a comment area where users can put their comments. For this I'm using a div element with conteneditable="true" property. Here's my code for html:
<html>
<script src="./includes/angular.min.js"></script>
<script src="./includes/angular.route.js"></script>
<script src="./includes/angular.sanitize.js"></script>
<script src="./includes/test.js"></script>
<body ng-app="testapp" ng-controller="cnt1">
<div contenteditable="true" ng-model='comment'>{{comment}} </div>
<input ng-model='comment' type='text'/><br>
<div>{{comment}}</div>
</body>
</html>
and here is the .js code
/// <reference path="./angular.min.js"
/// <reference path="./angular.route.js"
/// <reference path="./angular.sanitize.js"
/// <reference path="./jq/jquery-2.0.3.min.js"
/// <reference path="./moment.min.js"
/// <reference path="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"
var app = angular.module("testapp", ['ngRoute', 'ngSanitize']);
app.controller("cnt1", function ($scope, $http, $rootScope, $timeout) {
$scope.comment = "type here";
});
I don't understand why ng-model updates the "comment" variable in the input element but it does not update the variable for the div element! Any help is appreciated! And if $apply() can fix this, how should I use it so it updates the "comment" variable in the div element?
582
https://docs.angularjs.org/api/ng/directive/ngModel
The
ngModeldirective binds aninput,select,textarea(or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
divs are not listed there. :(
If you're still looking to work w/ a div, take a look at the example here! https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
