Example analysis of the four basic forms of directives in AngularJS-JS Tutorial-php.cn

Example analysis of the four basic forms of directives in AngularJS

高洛峰

Release： 2016-12-05 16:49:26

Original

1039 people have browsed it

The examples in this article describe the four basic forms of directives in AngularJS. Share it with everyone for your reference. The details are as follows: Among the four basic forms of

instructions,

note that the usage method of annotation type instruction M is Note that the left and right tests must have Spaces will be recognized normally

All instructions can be combined with each other. If you do not write restrict, it will default to the A attribute instruction. To support IE8, it is generally best for browsers to set instructions as attributes

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <elementtag>E</elementtag>
    <div attr>A</div>
    <div class="classnamw">C</div>
    <!-- 注意注释变量两侧必须加上空格 否则不会正确执行这个指令 -->
    <!-- directive:commit -->
    <div></div>
  <script src="./js/angular.min.js"></script>
  <script>
    var app = angular.module(&#39;myapp&#39;,[]);
    app.directive(&#39;elementtag&#39;,function(){
      return {
        restrict:"E", //元素指令
        link:function(scope,element,attrs){
          console.log("this is a element");
        }
      };
    })
    .directive(&#39;attr&#39;,function(){
      return {
        restrict:"A", //属性指令
        link:function(scope,element,attrs){
          console.log("this is a attribute");
        }
      };
    })
    .directive(&#39;classnamw&#39;,function(){
      return {
        restrict:"C", //class 指令
        link:function(scope,element,attrs){
          console.log("this is a class");
        }
      };
    })
    .directive(&#39;commit&#39;,function(){
      return {
        restrict:"M", //注释指令
        link:function(scope,element,attrs){
          console.log("this is a commit");
        }
      };
    });
  </script>
</html>

Copy after login

I hope that what this article describes will be helpful to everyone's AngularJS program Design helps.