AngularJS指令

Question

我在頁面上多次添加以下div。

<div class="box span6"> 
    <div class="box-header"> 
     <h2 class="custom"><i class="fa-icon-group" style="opacity:.7"></i><span class="break"></span>[TEXT]</h2> 
    </div> 
    <div class="box-content"> 
     <p><strong>[TEXT 2]</strong></p> 
     <ul> 
      <li ng-repeat = "course in courses">{{course}}</li> 
     </ul> 
    </div> 
</div> 

我想寫一個指令，但我不知道如何將值傳遞給指令。

例如，我想通過文本的「名稱」和「文本2」的「電子郵件地址」以及「課程」的書籍列表。

是否有任何方法將值傳遞給指令，如將值傳遞給函數？

Answer 1

函數的參數類似於HTML指令的屬性。在鏈接和編譯函數中，您將獲得一個屬性對象，該對象包含元素上所有屬性的標準名稱和值。例如，您可以有<div data-awesome-directive data-color="red" data-size="16"></div>。該指令的鏈接功能可能看起來像link: function (scope, element, attributes) { ... }。在那裏，您可以訪問屬性的值作爲對象的屬性：attributes.awesomeDirective,attributes.color和attributes.size。注意名稱是如何規範化的（awesome-directive變成awesomeDirective）。

對於更高級的東西，例如函數調用或表達式，請查看$parse。它可以解析一個表達式，如foo.bar()並在一個作用域上調用它。

HTH！

Answer 2

要添加到stevuu的反應，如果你想將值傳遞給在該範圍內的變量，你可以這樣做如下指令：

<div data-awesome-directive data-color="selected_color" ... ></div> 

其中selected_color在包含範圍內設定。在鏈接功能中，顏色可以通過以下方式獲得並設置在指令的範圍內：

link: function(scope, element, attributes) { 
    scope.color = scope.$eval(attributes.color); 
}