如何在指令

中不引用controllerAs名稱以下是描述問題的最簡單代碼。在頁面上，我有：如何在指令

<div ng-controller='AController as a'> 
    <div a-directive></div> 
</div>

在JS，我有：

app.directive("aDirective", function($compile){ 
    return { 
     scope: true, 
     link: function(scope, element, attrs) { 
      var template = "<h1>{{a.label}}</h1>"; 
      element.append($compile(template)(scope)); 
     } 
    } 
}); 

app.controller("AController", function($scope){ 
    self = this; 
    self.label = "some text"; 
});

這樣的作品，但問題是，{{a.label}}，這使得視圖和控制器/模型緊密耦合。有沒有辦法擺脫那個a，而不是在指令代碼中提及controllerAs-name呢？（就像我在控制器代碼中所做的那樣）

來源

2015-10-16 Peter Pei Guo

好吧，這取決於你真正打算完成這個指令。在這個例子中，解耦這些指令的唯一方法是引入一個參數，也就是''div a-directive label =「a.label」>' – Claies

「，除非你沒有在這裏顯示的隱藏原因，你應該**總是**青睞使用'template'或'templateUrl'來通過帶有'element.append'的'link';任何時候當你使用'element'的時候，你都不在角上下文中，並且使用JQuery（或JQLite，如果JQuery不可用），這隻會讓你的代碼更加複雜。 – Claies

謝謝！同意所有其他的觀點。該代碼只是爲了描述耦合問題。雖然不幸的是，沒有像我們在控制器中所做的那樣直接解耦的方法，但是您展示的解決方案非常酷。我想，這個限制也是由js本身所貢獻的，而不僅僅是角度。 –

爲了改善這一點，您可以將文本作爲參數傳遞給指令。這樣的事情是最初的想法：

<div a-directive="a.label"></div>

不過，我建議使用的別名控制器，所以我做了Plunker在這裏你可以看到這一切與一些改進合作。

看看這裏：http://plnkr.co/edit/1hBSBxwSEPXoj9TULzRQ?p=preview

我也建議使用template而不是link和限制指令的元素，而不是使用它作爲屬性，因爲它修改DOM。但是，是的，你可以繼續改進它直到時代的終結:)

來源

2015-10-16 01:00:23 Lucio

回答

相關問題