javascript - ngBindHtml 未呈现经过处理的 HTML

Question

我有一个简单的角度应用程序，我正在尝试使用 ngBindHtml 将一些 html 注入页面。但是，它没有被注入。这是我的 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

你可以看到被 ngBinded 的 div 没有出现。为什么是这样？

Answer 1

您可以使用指令代替过滤器。请看这个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);
        }
    }
});