Home > Article > Web Front-end > Example analysis of the four basic forms of directives in AngularJS

Example analysis of the four basic forms of directives in AngularJS

高洛峰Original: 2016-12-05 16:49:261001browse

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 b43103bbeb9d74ebb03a239e4295f272 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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implement checkbox batch selection operation based on jsNext article：Implement checkbox batch selection operation based on js

See more

Example analysis of the four basic forms of directives in AngularJS

Related articles