【发布时间】：2016-01-05 21:33:26
【问题描述】：
我试图在指令的链接函数内的应用程序中附加ngBindHtml 指令。指令所在的模块注入ngSanitize，如下：
angular.module('ui.bootstrap.contextMenu', ['ngSanitize'])
.directive('contextMenu', cm);
其中cm 是指令函数。链接函数如下所示：
var link = function ($scope, element, attrs) {
element.on('contextmenu', function (event) {
event.stopPropagation();
$scope.$apply(function () {
event.preventDefault();
var options = $scope.$eval(attrs.contextMenu);
var model = $scope.$eval(attrs.model);
if (options instanceof Array) {
if (options.length === 0) {
return;
}
renderContextMenu($scope, event, options, model);
} else {
throw '"' + attrs.contextMenu + '" not an array';
}
});
});
};
renderContextMenu 勾勒出将附加到页面正文的 html。在这个函数中，我有以下代码行：
$div.attr('ng-bind-html', text);
$a.append($div);
它应该产生如下所示的东西：
<a><div ng-bind-html="the text"></div></a>
确实如此。问题是文本实际上并未显示。有人对此有什么想法吗？
【问题讨论】：
-
您正在尝试直接操作 DOM，这不是做事的角度方式。那是jQuery。您尝试做的事情应该使用绑定进行排序。例如，通过为小子模块创建指令并将文本传递给它。
-
这个评论我看不懂。来自关于指令的文档：在高层次上，指令是 DOM 元素（例如属性、元素名称、注释或 CSS 类）上的标记，它告诉 AngularJS 的 HTML 编译器（$compile）将指定的行为附加到DOM 元素（例如通过事件侦听器），甚至转换 DOM 元素及其子元素。 在这个documentation 中，甚至还有一个标题为创建操作 DOM 的指令的部分乙>。上面的代码使用了 Angular 框架提供的 jqLite。
-
我认为这与相对于 DOM 的生成如何调用链接函数有关。
-
支持 DOM 操作，但许多人认为这是不好的做法。就像控制器被许多人视为“不要使用”一样。使用指令（带有指令控制器）通常可以创建更简洁的代码，并且也可以更容易地在以后升级到 ng2。他们使用的示例是一个完美的情况，您只需使用绑定而不是操作 DOM。
-
所以……您似乎对回答问题不感兴趣，而是对“角度方式”进行演讲。我仍然没有遵循您要说的内容，因此我将尝试进行解释，也许您可以提供一些建设性的见解。我有一个指令，当用户右键单击特定元素时会生成一个上下文菜单。我希望菜单 1）出现在发生右键单击事件的位置，以及 2）显示附加到用户定义功能的用户提供的名称。上下文菜单可能包含嵌套菜单。去吧。