Angular js指令和限制选项

Question

我正在阅读来自此 url https://docs.angularjs.org/guide/directive 的指令的一篇文章

The restrict option is typically set to:

    'A'     - only matches attribute name
    'E'    - only matches element name
    'C'    - only matches class name
    'M'    - only matches comment

<div ng-controller="Controller">
  <my-customer></my-customer>
</div>

angular.module('docsRestrictDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
  };
});

模板html文件

Name: {{customer.name}} Address: {{customer.address}}

请帮我理解 restrict: 'E', ?

是什么意思

我正在寻找一个限制为 A 或 C

的示例

请告诉我限制的用法：'A'和C

还告诉我如何将多个参数传递给指令？

谢谢

Answer 1

假设您有一个指令“myDirective”

如果在限制中你只有 C，你只能将它用作这样的类：

<div class="my-directive"></div>

如果是 A 则作为属性：

<div my-directive></div>

如果是 E 则作为元素

<my-directive></my-directive>

要传递参数，你通常需要属性：

<div my-directive my-first-argument="toto" my-second-argument="titi"></div>

要获得价值，你必须这样做：

use the attr provided in link function
use the scope with one way or two way binding.

当涉及到指令、元素之后和最后类时，我个人更喜欢属性方法。我已经基于我不想与之冲突的类进行引导。

Answer 2

请帮我理解一下restrict: 'E', 是什么意思？

“E”限制将按元素名称匹配：

<my-customer></my-customer>

我正在寻找一个限制为 A 或 C 的示例

请告诉我限制的用法：'A' 和 C

“A”限制将通过元素属性匹配：

<div my-customer=""></div>

“C”限制将由一个类匹配：

<div class="my-customer"></div>

还告诉我如何将多个参数传递给指令？

这取决于您的要求，但一种简单的方法是使用隔离范围：

.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
       arg1: "@",
       arg2: "@"
    },
    templateUrl: 'my-customer.html'
  };
});

<my-customer arg1="first" arg2="second"></my-customer>

This SO answer 很好地解释了这个过程。

Answer 3

restrict 是在 DDO（指令定义对象）中使用的关键，以告知它将在视图中显示的内容

以 DDO（指令定义对象）为例

1. 带有restrict:E（元素）的指令

   指令

   app.directive('my-directive',function(){
            return {
               restrict: 'E', //means HTML Element
               ...
             };
   });
   

   视图中的so指令将restrict:'E'作为HTML元素中的元素，如下所示

查看

<myDirective></myDirective>

1. 带有restrict:A（属性）的指令

指令

 app.directive('my-directive',function(){
     return {
        restrict: 'A', //means HTML attribute
        ...
      };
     })

视图中的so指令将restrict:'A'作为HTML元素中的属性，如下所示

查看

<div myDirective></div>

1. 带有restrict:'C'（类）的指令

指令

 app.directive('my-directive',function(){
     return {
        restrict: 'C', //means HTML attribute
        ...
      };
     })

在视图中将restrict:'C' 的so 指令作为HTML 元素中的类，如下所示

查看

<div class="myDirective"></div>

您可以使用 Isolate 范围（不从其父范围继承），或者您可以将变量传递给取决于您的实现的属性，两者都可以在指令的 link 和 controller 中使用

对于隔离范围 DDO 将是

<my-directive variable1="hello" variable2="world" variable3="call()"></my-directive>



app.directive('myDirective',function(){
         restrict:E,
        scope:{
           variable1:'@variable1',
           variable2:'=varialbe2',
           variable3:'&variable3'
          }
    })

或者您也可以通过属性传递数据，并使用指令的链接函数中的 attrs 和指令控制器中的 $attrs DI 访问它们