Angular JS指令和限制选项 [英] Angular js directive and restrict option

问题描述

我正在从此网址 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

i am looking for a example where restrict will be A or C

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

please show me the usage of restrict: 'A' and C

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

谢谢

推荐答案

请帮助我了解限制的含义:'E'，?

please help me to understand what is the meaning of restrict: 'E', ?

"E"限制将通过元素名称匹配:

The 'E' restriction will match by element name:

<my-customer></my-customer>

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

i am looking for a example where restrict will be A or C

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

please show me the usage of restrict: 'A' and C

"A"限制将通过元素属性匹配:

The 'A' restriction will match by an element attribute:

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

"C"限制将按类别进行匹配:

The 'C' restriction will match by a class:

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

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

also tell me how could i pass multiple argument to directives ?

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

It depends on your requirements, but one simple way is using an isolated scope:

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

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

此SO答案很好地说明了此过程.

This SO answer gives a pretty good explanation of this process.

这篇关于Angular JS指令和限制选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！