ngBindHtml не рендеринг Sanitized HTML

Question

У меня есть простое угловое приложение, и я пытаюсь вставить некоторые 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); 
    }; 
}]); 

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

Вот codepen: http://codepen.io/trueScript/pen/MwbVpO?editors=101

Вы можете увидеть ДИВ быть ngBinded не появляется. Почему это?

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); 
     } 
    } 
});