Question

在我的指令中，我在其中使用appendTo和ng-click：

$("<div>" + "<a href='' ng-click='addIt()' + user + "</a></div>").appendTo '.user-class'

而ng-click并不起作用。我应该使用$compile吗？在这种情况下如何使用它？

Answer 1

此代码是指令的一部分，该指令从json生成下拉菜单。没有选项可以将其移动到指令模板，因此需要找到解决方案如何进行点击＆＃39;在这里工作。

像马修一样，我最好奇的是哪些部分无法移出外部模板/内部模板功能。我必须重新$compile指令来添加ng-click处理程序，这对我来说没有多大意义。

有意义的方法是将ng-click指令添加到模板中。外部函数或在指令定义对象中返回字符串值的函数。

在$compile步骤完成后运行link在性能方面不是一个好主意，看看它如何重新编译指令附加到的整个DOM元素。尽可能避免这样做。

.directive('myDir', function () {
  return {
    template: function (/*element, attrs*/) {
      return '<div><a href="" ng-click="addIt(user)">{{::user}}</a></div>';
    },
    link: function (scope, el, attrs) {
      scope.user = 'John';
    }
  };
});

这将导致以下DOM结构：

<div>
  <a href="" ng-click="addIt(user)">John</a>
</div>

<强> jsbin

Answer 2

是的，你需要$ compile，在指令中注入$ compile，你可以这样做：

 var link = $compile("<div>" + "<a href='' ng-click='addIt()'" + user + "</a></div>")(scope);
 link.appendto('.user-class');

Angular：在指令中添加ng-click

2 个答案: