AngularJS ng-bind-html 2way data binding

Question

I have an AngularJS app where I got some data from a webservice and parse some HTML to the template with ng-bind-html ... but when I try to bind data inside the ng-bind-html - nothing happens .. anyone?

I have a little example here,.. not the right case.

HTML

<div ng-controller="MyCtrl">
    <div ng-bind-html="post"></div>
</div>

Javascript

angular.module('myApp',[])
.controller('MyCtrl', function($scope, $sce) {
    $scope.name = 'World';
    $scope.post = $sce.trustAsHtml("<h1>hello {{name}}</h1>");
});

http://jsfiddle.net/bugd67e3/

Is the HTML fragment in your example coming from the webservice? — Gregory Avery-Weir
– Gregory Avery-Weir, Commented Aug 20, 2014 at 13:58
Do you have sanitize included in you app? also see github.com/angular/angular.js/issues/4992 — PSL
– PSL, Commented Aug 20, 2014 at 14:19

Darshan P · Accepted Answer · 2014-08-20 14:21:01Z

3

DEMO

Add this directive

angular.module("myApp").directive('compileTemplate', ["$compile", "$parse", function($compile, $parse) {
    return {
        restrict: 'A',
        link: function($scope, element, attr) {
            var parse = $parse(attr.ngBindHtml);
            function value() { return (parse($scope) || '').toString(); }

            $scope.$watch(value, function() {
                $compile(element, null, -9999)($scope); 
            });
        }
    }
}]);

answered Aug 20, 2014 at 14:21

Darshan P

2,24119 silver badges16 bronze badges

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

1 Comment

Ste Over a year ago

Your demo does not use 2-way binding Could you add an ng-model to a form element and demo 2-way binding please?

Bhargav Rao · Accepted Answer · 2014-12-05 09:27:42Z

In my case，I have $scope.content which is dynamic pulled from back-end, with delay of 1-2 seconds. CKEDITOR.inline() doesn't work if the content is populated after CKEDITOR is already initialized. I ended up with the following solution, which tackles the 2ways data binding and loading delay well.

<div id="divContent" contenteditable="true" ck-editor ng-model="Content">
</div>


angular.module('ui.ckeditor', []).directive('ckEditor', ["$compile", "$parse", "$sce", function ($compile, $parse, $sce) {
    return {
        require: '?ngModel',
        link: function (scope, elm, attr, ngModel) {
            var hasInit = false;
            scope.$watch(attr.ngModel, function (newValue, oldValue, scope) {
                if (newValue && !hasInit) {
                    hasInit = true;
                    var content = $.parseHTML(newValue.toString());
                    $(elm[0]).append(content);
                    CKEDITOR.inline(elm[0]);
                    elm.on('blur keyup change', function () {
                        scope.$evalAsync(read);
                    });
                }
            })

            // Write data to the model
            function read() {
                var html = elm.html();
                ngModel.$setViewValue($sce.trustAsHtml(html));
            }
        }
    };
}]);

Collectives™ on Stack Overflow

AngularJS ng-bind-html 2way data binding

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related