javascript - 在 ng-bind-html::Binding Angular 属性中绑定(bind) ng-click

Question

我有一个 HTML 代码，我正在根据导航堆栈动态更改。我正在使用 ng-bind-html 将包含代码的字符串插入到 View 中。现在我还需要能够将 ng-click 属性输入到 View 中。一切正常，除了 ng-click 属性没有被注入(inject)，因此我无法在面包屑中快速导航。

这是我传递给 View 的 HTML:

$scope.breadcrumbs = $scope.breadcrumbs + '&nbsp;<i class="ion-ios-arrow-forward"></i>&nbsp;' + '<span ng-click="goToLevel(pathLength)" class="browse-breadcrumbs-link">' + $scope.title + '</span>';

该类被应用，但 ng-click 属性被简单地忽略。我错过了什么？谢谢。

Answer 1

如果您查看 ng-bind-html API，您将了解到它仅解析 html 并使用 element.text 将其作为文本附加到 DOM .添加的 html 将没有任何编译的 Angular DOM。它将作为普通标记工作。

我建议您将自己的指令放在 breadcrumb 元素上来处理面包屑内容。这样您就可以控制指令链接函数中的 DOM。创建面包屑 html 后，您需要先编译该 html，然后使用 $compile 服务将其附加到 breadcrumb DOM。

代码

link: function(scope, element, attrs){
   //you code would something like below..
   //create an html
   scope.breadcrumbs = scope.breadcrumbs + '&nbsp;<i class="ion-ios-arrow-forward"></i>&nbsp;' + '<span ng-click="goToLevel(pathLength)" class="browse-breadcrumbs-link">' + $scope.title + '</span>';
   element.empty();
   element.append($compile(scope.breadcrumbs)(scope))
}