Question

我有一个基于导航堆栈动态更改的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属性被简单地忽略。我错过了什么？感谢。

Answer 1

如果您查看over(partition by group) API，您就会知道它只会解析html＆amp;使用ng-bind-html将其作为文本附加到DOM。添加的html将没有任何编译角度DOM。它将作为正常标记工作。

我建议你自己的指令来处理面包屑的东西，把它放在element.text元素上。这样你就可以在指令链接函数中控制那个DOM。在创建breadcrumb html之后，您需要先编译该html，然后使用breadcrumb服务将其附加到breadcrumb DOM。

<强>代码

$compile

Answer 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>

绑定ng-click HTML中的ng-bind-html :: Binding Angular属性

2 个答案:

控制器

视图