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); 
}