编译 ng-bind-html 后 ng-click 不起作用

Posted 2023-03-05

【中文标题】编译 ng-bind-html 后 ng-click 不起作用

【英文标题】：ng-click not working after compile ng-bind-html

【发布时间】：2014-02-17 15:43:36

【问题描述】：

我有一个指令

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

检查Demo

【讨论】：

非常感谢！！！完美运行！在我写它的方式是 $sce 问题还是我没有以正确的方式将它传递给指令？

@Reza - 你能解释一下 $watch 和 $compile 在这里做什么。如果你能解释你的代码会很高兴。

这里$watch 用于自动渲染，它监听指令的content 值，如果内容发生更改，则它可以工作。如果你认为你的指令只工作一次，那么你不需要$watch。这里$parse用于解析字符串内容，$compile会将新生成的HTML与scope链接起来。

@Reza 你能告诉我如何将 templateUrl 传递给 $scope.myVal 吗？谢谢！

@mila 这里$scope.myVal 用于将HTML Content 作为字符串而不是url 传递。如果您需要加载template，请使用指令的templateUrl，例如docs.angularjs.org/guide/directive#template-expanding-directive