I have a div where I render my html string, also I have a list of options which updates this string from controller, to render html I use ng-bind-html
and function:
ng-bind-html="trustTemplate(data.emailNotification.textTemplate)"
$scope.trustTemplate = function (value) {
var trust = value.replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 16px;'>").replace(/\}}/g, "<span ng-click='click($event)' contenteditable='false' class='remove-tag fa fa-times'></span></span> ");
return $sce.trustAsHtml(trust);
};
the problem here if user wants to type something ng-model doesn't update its value, I have tried $scope.$watch
or setup watcher from directive and found that ng-model doesn't update its value, so I believe two way binding doesn't work.
Where is my mistake or what am I missing ?
Full code:
Html
<div id="template"
contenteditable="true"
style="height: 200px; width: 100%; border: 1px solid #d7d7d7; padding: 10px"
ng-model="data.emailNotification.textTemplate"
ng-bind-html="trustTemplate(data.emailNotification.textTemplate)"
markers
></div>
Controller
$scope.data.emailNotification.textTemplate = "User template user info: {{userFirstname}} - {{userLastname}}";
$scope.selectedVariables = function (item) {
if(item !== null){
$scope.data.emailNotification.textTemplate = $scope.data.emailNotification.textTemplate.concat(' {{' + item + '}} ');
}
};
$scope.trustTemplate = function (value) {
var trust = value.replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 16px;'>").replace(/\}}/g, "<span ng-click='click($event)' contenteditable='false' class='remove-tag fa fa-times'></span></span> ");
return $sce.trustAsHtml(trust);
};
$scope.$watch('data.emailNotification.textTemplate', function (newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
//updates only with init and function selectedVariables (). Show actual value of $scope.data.emailNotification.textTemplate
});
$scope.selectedVariables(null);
Directive
app.directive('markers', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$render = function () {
var newValue = ngModel.$viewValue;
console.log(newValue)
//updates only with init and function selectedVariables (). Show actual value of $scope.data.emailNotification.textTemplate
};
attrs.$observe('ngModel', function(value){ // Got ng-model bind path here
scope.$watch(value,function(newValue){ // Watch given path for changes
console.log(newValue);
//updates only with init and function selectedVariables (). Show actual value of $scope.data.emailNotification.textTemplate
});
});
}
}
});