Ng-click не работает после компиляции ng-bind-html

У меня есть директива

app.directive("dir", function($compile, $sce){
      return{
        restrict: "E",
        link: function(scope, element, attr){
          scope.$watch('content',function(){
            var html = $sce.trustAsHtml(attr.content);
            scope.alabala = $compile(html)(scope);
          },true);
        },
        template: "<div ng-bind-html='alabala'></div>",
      }
    });

контроллер:

function MainController($scope, $http, customService, $location, $sce, $compile){
    $scope.init = function(){
        customService.get().success(function(data) {
                 var html = $sce.trustAsHtml(data);
                $("#dir").attr("content", data);

            });
    };
}

и на моей индексной странице у меня есть:

<div id="div" ng-controller="MainController" class="pull-right span3" ng-init="init()">
      <dir id="dir" ></dir>
</div>

моя пользовательская услуга возвращается каждый раз, когда другой html содержит, например,

<button ng-click='click()'>Click me</button>

То, что я пытаюсь сделать, - это каждый раз, когда я нажимаю другое значение в содержании моей директивы, чтобы скомпилировать его, и поместить его в свой html и обработать функцию щелчка с моего контроллера. Поскольку я новичок в AngularJS, я когда-то боролся с этой проблемой. Пожалуйста, помогите.

Ответ 1

Вам не нужно иметь дело с $sce для достижения вашей цели.

Вы можете передать строку HTML как строку в директиву. После компиляции в директиве он будет работать.

В HTML, где вам понадобится directive

<dir id="dir" content="myVal"></dir>

Задайте другое значение в myVal вашем контроллере

$scope.myVal = '<button ng-click=\'buttonClick()\'>I\'m button</button>'; // HTML as string

directive

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

Отметьте Демо