Watch ng-model in ng-bind-html using AngularJs

Question

Here is my Markup

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
    <p ng-bind-html="myText|unsafe"></p>
</div>

I am using this code

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>{{name}}</h1>";
    $scope.name="Habib";
});
app.filter('unsafe', function ($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

Output:

My name is: {{}}

Desired Output:

My name is: Habib

I want it should also reflect value from textbox.

Robyn MacCallum · Accepted Answer · 2018-02-21 19:12:52Z

1

EDIT

The reason you are having issues with getting $scope.name bound is because ng-bind-html does not bind that html to the current scope. You can use a directive to fix this. Here is an answer that fixes your issue.

Here is a plunker that adds the directive and shows the behavior you are looking for.

Here is the directive that was added that fixes your issue:

app.directive('compileTemplate', function($compile, $parse){
   return {
       link: function(scope, element, attr){
           var parsed = $parse(attr.ngBindHtml);
           function getStringValue() {
                return (parsed(scope) || '').toString();
           }

            // Recompile if the template changes
            scope.$watch(getStringValue, function() {
                // The -9999 makes it skip directives
                // so that we do not recompile ourselves
                $compile(element, null, -9999)(scope);  
            });
        }
    }
});

You need to declare $scope.name="Habib" before the myText scope variable.

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.name="Habib";
    $scope.myText = "My name is: <h1>{{name}}</h1>";
});
app.filter('unsafe', function ($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
   };
});

edited Feb 21, 2018 at 19:12

answered Feb 21, 2018 at 17:34

Robyn MacCallum

2064 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

habib Over a year ago

Ok, But how the value of input will reflect

Robyn MacCallum Over a year ago

It should update when you edit the text in input. You may need to use $scope.$apply() in your controller to trigger a digest cycle to update the variable.

Robyn MacCallum Over a year ago

@habib I edited my initial answer and found the reason you are having an issue.

habib Over a year ago

That's pretty nice!, Thanks

Collectives™ on Stack Overflow

Watch ng-model in ng-bind-html using AngularJs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related