Question

http://plnkr.co/edit/Ry8gkozAaudhlmdPPQie?p=preview

正如你在plunkr中看到的那样，我正在尝试创建一个指令，该指令将根据该指令元素上属性的存在呈现不同的模板。

<my-dir></my-dir>
<my-dir someparam="true"></my-dir>

我这样做是通过将条件放在指令的链接调用中，如：

var str = "";
        if(attr.someparam){
          str = "<button class='btn btn-warning' ng-click='test2()'> Test 2 </button>";
        }else{
          str = "<button class='btn btn-primary' ng-click='test1()'> Test 1 </button>";
        }
        el.append(str);

我不想使用ng-if，因为如果不渲染模板，我根本不希望html存在于页面上。

这似乎有点奏效，但ng-click电话似乎根本不起作用。请让我知道我做错了什么，以及是否有更好/正确的做法。

Answer 1

您需要编译html，以便能够将$ scope与动态添加的HTML一起使用。

$ compile函数将HTML绑定到$ scope。这是一个链接功能。如果没有此角度，则无法在模板中找到类似ng-click的指令。

http://plnkr.co/edit/vfVeAkGO5VaJd2dWUTWV?p=preview

 .directive('myDir', function($compile) {
return {
  restrict: 'E',
  link: function($scope,el,attr,cntl){
    var str = "";
    if(attr.someparam){
      str = "<button class='btn btn-warning' ng-click=test2()> Test 2 </button>";
    }else{
      str = "<button class='btn btn-primary' ng-click='test1()'> Test 1 </button>";
    }
    var elmnt = $compile(str)($scope);
    el.html(""); // dummy "clear"
    el.append( elmnt );
  }
};

如何在指令中的链接调用中使用ng-click？

1 个答案: