AngularJs 지시어 이해_AngularJS

지침의 경우 단순히 특정 DOM 요소에서 실행되는 기능으로 이해될 수 있습니다. 지침은 이 요소의 기능을 확장할 수 있습니다.

먼저 전체 매개변수 예를 살펴본 다음 각 매개변수의 기능과 사용법을 자세히 소개합니다.

angular.module('myApp', []) 
.directive('myDirective', function() { 
  return { 
    restrict: String, 
    priority: Number, 
    terminal: Boolean, 
    template: String or Template Function: 
  function(tElement, tAttrs) {...}, 
  templateUrl: String, 
  replace: Boolean or String, 
  scope: Boolean or Object, 
  transclude: Boolean, 
  controller: String or 
  function(scope, element, attrs, transclude, otherInjectables) { ... }, 
  controllerAs: String, 
  require: String, 
  link: function(scope, iElement, iAttrs) { ... }, 
  compile: // 返回一个对象或连接函数，如下所示：
  function(tElement, tAttrs, transclude) { 
    return { 
      pre: function(scope, iElement, iAttrs, controller) { ... }, 
      post: function(scope, iElement, iAttrs, controller) { ... } 
      } 
    return function postLink(...) { ... } 
    } 
  }; 
 });

1. 제한[문자열]

restrict는 선택적 매개변수입니다. DOM에서 지시어가 선언되는 방식을 지정하는 데 사용됩니다. 기본값은 A이며 속성으로 선언됩니다.
선택값은 다음과 같습니다.
E(요소)

df5f4caa8a20731d2df135e287a4d85bf1a196a69f568379b989446cdd574c9e
A(속성, 기본값)

0f099a11bd716f37a64b25aa71c7f56116b28748ea4df4d9c2150843fecfba68

C(수업명)
4a3c30a4fe8ad43d1f796c171764132116b28748ea4df4d9c2150843fecfba68

엠(댓글)

ebcca2afbbfaf6df2b532e7d24c582bb 일반적으로 브라우저 호환성을 고려하면 기본 속성을 사용하고 속성 형태로 선언하는 것이 좋습니다. 마지막 방법은 force index가 필요하지 않은 경우에는 사용하지 않는 것이 좋습니다.

코드:

효과:

 angular.module('app',[])
  .directive('myDirective', function () {
      return { 
        restrict: 'E', 
        template: '<a href="http://www.baidu.com">百度</a>' 
      };
    })
HtmlCode:
 <my-directive></my-directive>

2. 우선순위[int]

대부분의 명령은 이 매개변수를 무시하고 기본값 0을 사용하지만 높은 우선순위를 설정하는 것이 매우 중요하거나 심지어 필요한 일부 시나리오도 있습니다. 예를 들어 ngRepeat는 이 매개변수를 1000으로 설정하여 동일한 요소에 대한 다른 명령보다 항상 호출되도록 합니다.

3. 터미널[bool]

이 매개변수는 현재 요소에서 이 명령어보다 우선순위가 낮은 명령어 실행을 중지하는 데 사용됩니다. 그러나 현재 명령어와 동일한 우선순위를 가진 명령어는 계속 실행됩니다. 예를 들어 ngIf는 ngView보다 약간 더 높은 우선순위를 갖습니다(실제로 터미널 매개변수를 제어합니다). ngIf의 표현식 값이 true이면 ngView가 정상적으로 실행될 수 있지만, 우선순위로 인해 ngIf 표현식의 값이 false이면 실행됩니다. ngView의 레벨이 낮을 경우 실행되지 않습니다.

4. 템플릿[문자열 또는 함수]

템플릿 매개변수는 선택사항이며 다음 두 가지 형식 중 하나로 설정되어야 합니다.

HTML 텍스트

tElement와 tAttrs라는 두 개의 매개변수를 받아들이고 템플릿을 나타내는 문자열을 반환하는 함수입니다. tElement 및 tAttrs의 t는 인스턴스에 상대적인 템플릿을 나타냅니다.
• 
  먼저 두 번째 사용법 시연:

HtmlCode: (효과는 위와 동일하며 데모는 수행되지 않습니다.)

angular.module('app',[])
  .directive('myDirective', function () {
      return { 
        restrict: 'EAC', 
        template: function (elem, attr) {
          return "<a href='" + attr.value + "'>" + attr.text + "</a>";
        }
    };
  })

<my-directive value="http://www.baidu.com" text="百度"></my-directive>
    <div my-directive
       value="http://www.baidu.com"
       text="百度"></div>

5. templateUrl[문자열 또는 함수]

templateUrl은 선택적 매개변수이며 다음 유형 중 하나일 수 있습니다.

외부 HTML 파일의 경로를 나타내는 문자열

tElement와 tAttrs라는 두 매개변수를 허용하고 외부 HTML 파일에 대한 경로가 포함된 문자열을 반환하는 함수입니다.
• 
  어느 쪽이든 템플릿의 URL은 ng의 내장 보안 계층, 특히 신뢰할 수 없는 소스에 의해 템플릿이 로드되지 않도록 보호하는 $getTrustedResourceUrl을 통과합니다. 기본적으로 지시문을 호출하면 HTML 템플릿 파일이 백그라운드에서 Ajax를 통해 요청됩니다. 많은 수의 템플릿을 로드하면 클라이언트 애플리케이션 속도가 심각하게 느려집니다. 지연을 방지하기 위해 애플리케이션을 배포하기 전에 HTML 템플릿을 캐시할 수 있습니다.

코드:

 angular.module('app',[])
  .directive('myDirective', function () {
      return { 
        restrict: 'AEC', 
        templateUrl: function (elem, attr) {
          return attr.value + ".html"; //当然这里我们可以直接指定路径，同时在模板中可以包含表达式
        }
    };
  })

6. 바꾸기[bool]

replace는 선택적 매개변수입니다. 이 매개변수가 설정된 경우 기본값은 false이므로 값은 true여야 합니다. 기본값은 템플릿이 이 지시어 를 호출하는 요소 내에 하위 요소로 삽입됨을 의미합니다. 예를 들어 위의 예에서 기본값을 사용하면 생성된 HTML 코드는 다음과 같습니다.

replace=true로 설정된 경우

<my-directive value="http://www.baidu.com" text="百度"><a href="http://www.baidu.com">百度</a></my-directive>

据我观察，这种效果只有设置restrict="E"的情况下，才会表现出实际效果。

介绍完基本的指令参数后，就要涉及到更重要的作用域参数了...

7、scope参数[bool or object]

 scope参数是可选的，可以被设置为true或一个对象。默认值是false。

如果一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。因此，对于这些对象来说scope默认被设置为true。内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域。这里的继承就不在赘述，和面向对象中的继承基本是一直的。

 首先我们来分析一段代码：

 <div ng-app="app" ng-init="name= '祖父'">
      <div ng-init="name='父亲'">
        第一代：{{ name }}
        <div ng-init="name= '儿子'" ng-controller="SomeController">
          第二代： {{ name }}
          <div ng-init="name='孙子'">
            第三代： {{ name }}
          </div>
        </div>
      </div>
    </div> 

我们发现第一代，我们初始化name为父亲,但是第二代和第三代其实是一个作用域，那么他们的name其实是一个对象，因此出现的效果如下：

第一代：父亲
第二代： 孙子
第三代： 孙子
我们在修改一下代码，把第三代隔离开来再看看效果：

 

<div ng-app="app"ng-init="name= '祖父'">
      <div ng-init="name='父亲'">
        第一代：{{ name }}
        <div ng-init="name= '儿子'" ng-controller="SomeController">
          第二代： {{ name }}
          <div ng-init="name='孙子'" ng-controller="SecondController">
            第三代： {{ name }}
          </div>
        </div>
      </div>
    </div>

JsCode:

 angular.module('app', [])
    .controller('SomeController',function($scope) {
      
    })
    .controller('SecondController', function ($scope) {
    
  }) 

效果如下：

第一代：父亲
第二代： 儿子
第三代： 孙子
在修改下代码来看看继承：

    <div ng-app="app"ng-init="name= '祖父的吻'">
      <div>
        第一代：{{ name }}
        <div ng-controller="SomeController">
          第二代： {{ name }}
          <div ng-controller="SecondController">
            第三代： {{ name }}
          </div>
        </div>
      </div>
    </div> 

效果如下：

第一代：祖父的吻
第二代： 祖父的吻
第三代： 祖父的吻
如果要创建一个能够从外部原型继承作用域的指令，将scope属性设置为true，简单来说就是可继承的隔离，即不能反向影响父作用域。

 再来看个例子：

  angular.module('myApp', [])
    .controller('MainController', function ($scope) {
    })
    .directive('myDirective', function () {
      return {
        restrict: 'A',
        scope:false,//切换为{}，true测试
        priority: 100,
        template: '<div>内部:{{ myProperty }}<input ng-model="myProperty"/></div>'
      };
    });

Html代码：

 <div ng-controller='MainController' ng-init="myProperty='Hello World!'">
    外部: {{ myProperty}}
    <input ng-model="myProperty" />
    <div my-directive></div>
  </div>

当我们改变scope的值我们会发现

false:继承但不隔离

true:继承并隔离

{}：隔离且不继承

 8、transclude

transclude是一个可选的参数。默认值是false。嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。我们可以将整个模板，包括其中的指令通过嵌入全部传入一个指令中。指令的内部可以访问外部指令的作用域，并且模板也可以访问外部的作用域对象。为了将作用域传递进去，scope参数的值必须通过{}或true设置成隔离作用域。如果没有设置scope参数，那么指令内部的作用域将被设置为传入模板的作用域。

只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。

 我们来看两个例子-导航栏：

<div side-box title="TagCloud">
    <div class="tagcloud">
      <a href="">Graphics</a>
      <a href="">ng</a>
      <a href="">D3</a>
      <a href="">Front-end</a>
      <a href="">Startup</a>
    </div>
  </div>

JsCode:

 angular.module('myApp', []) 
 .directive('sideBox', function() { 
   return { 
     restrict: 'EA', 
     scope: { 
       title: '@' 
     }, 
     transclude: true, 
     template: '<div class="sidebox"><div class="content"><h2 class="header">' +
       '{{ title }}</h2><span class="content" ng-transclude></span></div></div>' 
     }; 
  }); 

这段代码告诉ng编译器，将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方。

再来你看个官网的例子：

angular.module('docsIsoFnBindExample', [])
 .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.name = 'Tobias';
  $scope.hideDialog = function () {
   $scope.dialogIsHidden = true;
   $timeout(function () {
    $scope.dialogIsHidden = false;
   }, 2000);
  };
 }])
 .directive('myDialog', function() {
  return {
   restrict: 'E',
   transclude: true,
   scope: {
    'close': '&onClose'
   },
   templateUrl: 'my-dialog-close.html'
  };
 });

my-dialog-close.html

<div class="alert">
 <a href class="close" ng-click="close()">&times;</a>
 <div ng-transclude></div>
</div>

index.html

<div ng-controller="Controller">
 <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
  Check out the contents, {{name}}!
 </my-dialog>
</div>

如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。

 9、controller[string or function]

 controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.

angular.module('myApp', []) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 'SomeController' 
}) 

可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器

angular.module('myApp',[]) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里
} 
}); 

我们可以将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有：

1. $scope

与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。

<div id="aDiv"class="box"></div>
具有如下的属性对象：
{ 
id: "aDiv", 
class: "box" 
} 

4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。

 angular.module('myApp',[])
 .directive('myLink', function () {
   return {
     restrict: 'EA',
     transclude: true,
     controller:
     function ($scope, $element,$attrs,$transclude) {
       $transclude(function (clone) {       
         var a = angular.element('<a>');
         a.attr('href', $attrs.value);
         a.text(clone.text());
         $element.append(a);
       });
     }
   };
 });

html 

<my-link value="http://www.baidu.com">百度</my-link>
<div my-link value="http://www.google.com">谷歌</div>

仅在compile参数中使用transcludeFn是推荐的做法。link函数可以将指令互相隔离开来，而controller则定义可复用的行为。如果我们希望将当前指令的API暴露给其他指令使用，可以使用controller参数，否则可以使用link来构造当前指令元素的功能性（即内部功能）。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互，使用链接会是更好的选择。使用了嵌入，控制器中的作用域所反映的作用域可能与我们所期望的不一样，这种情况下，$scope对象无法保证可以被正常更新。当想要同当前屏幕上的作用域交互时，可以使用传入到link函数中的scope参数。

10、controllerAs[string]

controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。

<div ng-controller="MainController as main">
    <input type="text" ng-model="main.name" />
    <span>{{ main.name }}</span>
  </div> 

JsCode:

 angular.module('myApp',[])
  .controller('MainController', function () {
    this.name = "Halower";
  });

控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试。

11、 require[string or string[]]

 require为字符串代表另外一个指令的名字。require会将控制器注入到其所指定的指令中，并作为当前指令的链接函数的第四个参数。字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。

如果不使用^前缀，指令只会在自身的元素上查找控制器。指令定义只会查找定义在指令作当前用域中的ng-model=""
如果使用?前缀,在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。
如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。
 如果添加了?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找
如果没有任何前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误
12、compile【object or function】

compile选项本身并不会被频繁使用，但是link函数则会被经常使用。本质上，当我们设置了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。

编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。 在作用域同DOM链接之前可以手动操作DOM。在实践中，编写自定义指令时这种操作是非常罕见的，但有几个内置指令提供了这样的功能。

13、link

compile: function(tEle, tAttrs, transcludeFn) {
 //todo:
 return function(scope, ele, attrs) {
 // 链接函数
 };

链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义时，编译函数会重载链接函数。如果我们的指令很简单，并且不需要额外的设置，可以从工厂函数（回调函数）返回一个函数来代替对象。如果这样做了，这个函数就是链接函数。

14、ngModel

它提供更底层的API来处理控制器内的数据,这个API用来处理数据绑定、验证、 CSS更新等不实际操作DOM的事情,ngModel 控制器会随 ngModel 被一直注入到指令中，其中包含了一些方法。为了访问ngModelController必须使用require设置.

ngModelController常用的元素如下：

 1).为了设置作用域中的视图值，需要调用 ngModel.$setViewValue() 函数。
$setViewValue() 方法适合于在自定义指令中监听自定义事件（比如使用具有回调函数的jQuery插件），我们会希望在回调时设置$viewValue并执行digest循环。

 angular.module('myApp')
    .directive('myDirective', function() {
      return {
        require: '?ngModel',
        link: function(scope, ele, attrs, ngModel) {
          if (!ngModel) return;
          $(function() {
            ele.datepicker({
               //回调函数
              onSelect: function(date) {
                // 设置视图和调用 apply
                scope.$apply(function() {
                  ngModel.$setViewValue(date);
                });
              }
            });
          });
        }
      };
    });

2).$render方法可以定义视图具体的渲染方式
3).属性(这里属性可以参考前一篇文章末尾进行学习)

以上就是关于AngularJs指令的全部内容，希望对大家的学习有所帮助。