AngularJS ng-bind-html Двусторонняя привязка данных

У меня есть приложение AngularJS, где я получил некоторые данные из веб-сервиса и проанализировал некоторый HTML в шаблоне с помощью ng-bind-html... но когда я пытаюсь связать данные внутри ng-bind-html - ничего не происходит... кто-нибудь?

У меня есть небольшой пример, .. не тот случай.

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/


angularjs angularjs-controller ng-bind-html
person pkdkk    schedule 20.08.2014    source источник
comment
Является ли фрагмент HTML в вашем примере исходящим от веб-сервиса?   -  person Gregory Avery-Weir    schedule 20.08.2014
comment
Да... закодировано как json..   -  person pkdkk    schedule 20.08.2014
comment
Вы указали ng-приложение?   -  person Luke SpringWalker    schedule 20.08.2014
comment
Да.. все остальное работает просто отлично ;)   -  person pkdkk    schedule 20.08.2014
comment
У вас есть дезинфекция, включенная в ваше приложение? также см. github.com/angular/angular.js/issues/4992   -  person PSL    schedule 20.08.2014
comment
Предоставляет ли веб-сервис данные JSON или фрагмент HTML? Если ответ и то, и другое сбивает с толку и, вероятно, является проблемой. Если это фрагмент HTML, пробовали ли вы вместо этого использовать ngInclude?   -  person Gregory Avery-Weir    schedule 20.08.2014

Ответы (2)


arrow_upward
3
arrow_downward

ДЕМО

Добавьте эту директиву

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); 
            });
        }
    }
}]);
person Darshan P    schedule 20.08.2014
comment
В вашей демонстрации не используется двусторонняя привязка. Не могли бы вы добавить ng-модель в элемент формы и демонстрацию двусторонней привязки, пожалуйста? - person Ste; 31.03.2020

arrow_upward
0
arrow_downward

В моем случае у меня есть $scope.content, который динамически извлекается из серверной части с задержкой 1-2 секунды. CKEDITOR.inline() не работает, если содержимое заполняется после того, как CKEDITOR уже инициализирован. Я пришел к следующему решению, которое хорошо справляется с двусторонней привязкой данных и задержкой загрузки.

<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));
            }
        }
    };
}]);
person Bernie GGGG    schedule 05.12.2014