ngBindHtml не отображает очищенный HTML

У меня есть простое угловое приложение, и я пытаюсь добавить HTML-код на страницу с помощью ngBindHtml. Однако его не вводят. Вот мой HTML:

<main id="main" ng-bind-html="oreGen | trust"></main>

И вот мое угловое приложение:

angular.module('programApp', ['programApp.controllers','programApp.filters','ngSanitize']);

angular.module('programApp.controllers', [])
  .controller('programController', ['$scope', '$filter', function($scope, $filter){
    $scope.oreGen = '<div class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</div>';
    $scope.collectFunction = function(value1, value2){
      alert(value1 + value2);
    };
  }]);

angular.module('programApp.filters', []).filter('trust', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

Когда страница загружается, внутри основного элемента ничего не появляется.

Вот кодовая ручка: http://codepen.io/trueScript/pen/MwbVpO?editors=101

Вы можете видеть, что div, являющийся ngBinded, не отображается. Почему это?


javascript angularjs ng-bind ng-bind-html ngsanitize
person alloy    schedule 23.07.2015    source источник
comment
где находится ng-app в вашем HTML-коде.. похоже, вы его пропустили.. Если он получил работу, он не будет запускать событие ng-click, поскольку ng-bind-html не компилирует элемент для вас..   -  person Pankaj Parkar    schedule 23.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать директиву вместо фильтра. Посмотрите на этот JSFiddle.

HTML:

<div ng-app="myApp" ng-controller="programController">
    <dir id="main" content="oreGen"></dir>
</div>

JS:

angular.module('myApp', [])
.controller('programController', ['$scope', '$filter', function ($scope, $filter) {
    $scope.oreGen = '<dir class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</dir>';
    $scope.collectFunction = function (value1, value2) {
        alert(value1 + value2);
    };
}])
.directive('dir', function ($compile, $parse) {
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            scope.$watch(attr.content, function () {
                element.html($parse(attr.content)(scope));
                $compile(element.contents())(scope);
            }, true);
        }
    }
});
person michelem    schedule 23.07.2015