0

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>&nbsp;");
        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>&nbsp;");

        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
                });
            });

        }
    }
});
antonyboom
  • 1,161
  • 2
  • 17
  • 44

0 Answers0