在 ng-bind-html 中绑定 ng-click :: 在 HTML 中绑定 Angular 属性答案

【问题标题】：Bind ng-click in ng-bind-html :: Binding Angular attributes in the HTML在 ng-bind-html 中绑定 ng-click :: 在 HTML 中绑定 Angular 属性
【发布时间】：2016-01-21 14:45:22
【问题描述】：

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

这是我传递给视图的 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 属性被简单地忽略。我错过了什么？谢谢。

【问题讨论】：

你应该考虑创建一些处理面包屑的指令。
@JoãoColucas 这将如何工作？我有 n 个可以进入的级别，数据是从服务器动态创建的，所以我无法提前知道我需要多少个字符串。
我相信如果你只是将下一个面包屑推入 i.e 数组并重复上述数组以生成漂亮的面包屑
@maurycy 我试试看
@maurycy 啊，是的，很简单，我是创建复杂解决方案的专家：P 谢谢

标签： javascript html angularjs

【解决方案1】：

如果您查看ng-bind-html API，您会知道它只解析 html 并使用element.text 将其作为文本附加到 DOM。添加的 html 不会有任何已编译的角度 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))
}

【讨论】：

【解决方案2】：

从面包屑的语法来看，它看起来可以用简单的ng-repeat 替换，并将 html 留给视图层，即

控制器

  $scope.breadcrumbs.push(newCrumb)

newCrumb 是一个包含您需要的所有信息的对象

查看

<span ng-repeat="crumb in breadcrumbs">
  &nbsp;<i class="ion-ios-arrow-forward"></i>
  &nbsp;<span ng-click="goToLevel(pathLength)" class="browse-breadcrumbs-link">{{crumb.title}}</span>
</span>

【讨论】：