指令Directive

时间 2019-11-09

标签指令 directive 繁體版

原文原文链接

1.ng-app

做用：规定Angular范围


建立多个ng-app时默认只执行第一个
可用模块合并解决
<body ng-app="app">
    <div ng-controller="demo1" ng-click="demo1()"></div>
    <div ng-controller="demo2" ng-click="demo2()"></div>


    <script src="../bower_components/angular/angular.js"></script>
    <script type="text/javascript">


        angular.module('app1', []).controller('demo1', ['$scope', function($scope){
            console.log(11111);
        }]);
        angular.module('app2', []).controller('demo2', ['$scope', function($scope){
            console.log(22222);
        }]);


        //模块合并
        angular.module('app', ['app1', 'app2']);
    </script>
</body>

2.ng-repeat

/*
http://www.angularjsapi.cn/#/ngRepeat
$index    number    循环的索引值
$first    boolean    是否第一次循环
$middle    boolean    是否第一次和最后一次循环之间的循环。
$last    boolean    是否最后一次循环。
$even    boolean    是否循环的次数$index为偶数。
$odd    boolen    是否循环的次数$index为奇数
*/

<body ng-app="app">


    <ul ng-controller="demo1Controller">
        <li ng-repeat="value in data">
            <span>{{$first ? $index : ''}}</span>
            <span>{{value.id}}</span>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
        </li>
    </ul>


    <script src="../bower_components/angular/angular.js"></script>
    <script type="text/javascript">


      angular.module('app', []).controller('demo1Controller', ['$scope', function($scope){


          $scope.data = [];


          for (var i = 10 - 1; i >= 0; i--) {
              var obj = {
                    id: i,
                    name: '名字是:' + i,
                    age: '年龄是:' + i
              };
              $scope.data.push(obj);
          }


      }])


    </script>
</body>

 1 <!-- 
 2 track by 
 3 若是数组内元素有重复，使用track by解决
 4 -->
 5 <body ng-app="app">
 6     <ul ng-controller="appController">
 7       <li ng-repeat="value in data track by $index">
 8         <span>{{value}}</span>
 9       </li>
10     </ul>
11     
12     <script src="../node_modules/angular/angular.js"></script>
13     <script type="text/javascript">
14          angular.module('app', [])
15          .controller('appController', ['$scope', function($scope){
16             $scope.data = ['小李子', '小孙子', '小孙子'];
17          }])
18     </script>
19 </body>

3.ng-class

<!--一、若是表达式是一个字符串，字符串应该是一个或多个空格分隔的类名称。-->
<!--二、若是表达式是数组，数组中的每一个元素应该是一个字符串，即一个或多个空格分隔的类名称。-->
<!--三、若是表达式是一个对象，应用相应的类名称做为key 值为true或false。-->
<!--四、若是特定类别已被设置，该指令将不会添加剧复类。-->


  <style type="text/css">
      .red {
        color: red;
      }
      .green {
        color: green;
      }
  </style>
</head>
<body ng-app="app">
    <!-- ng-class: 会根据当前设置对象的属性和属性值决定是否添加特定类名 -->
    <ul ng-controller="demo1Controller" >
        <li ng-repeat="value in data" ng-class="{red:$even,green:$odd}">
            <span>{{value.id}}</span>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
        </li>
    </ul>



    <script src="../bower_components/angular/angular.js"></script>

 1 <style>
 2     .red{
 3       background-color: red;}
 4 
 5     .green{
 6       background-color: green;}
 7 
 8     #box{
 9       height: 200px;
10       width: 200px;transition:background-color 1s ease;
11 }
12 </style>
13 </head>
14 <body ng-app>
15 <select ng-model="style">
16 <option value="red">红色</option>
17 <option value="green">绿色</option>
18 </select>
19 
20   <!-- <div id="box" ng-class="style"></div> -->
21 <div id="box" ng-class="{red:style=='red', green:style=='green'}"></div>
22 
23 <script src="bower_components/angular/angular.js"></script>
24 </body>

4.ng-bind ng-bind-html

将做用域(scope)中的值绑定到元素的innerHTML上javascript

ng-bind在绑定的值包含HTML时会转义，为了安全(跨站攻击)css

1     <!-- ng-bind -->
2     <div ng-app="app" ng-init="username='shit'">
3         <span ng-bind="username"></span>
4     </div>

 1     <!-- ng-bind-html -->
 2     <div ng-app="app" ng-init="username='<p>shit<p>'">
 3        <!-- 
 4         在页面当中绑定一个不安全的值的话，必需要去引用ng官方提供的库，作安全校验
 5         $sanitize : 安全检验模块
 6         须要下载包 cnpm install angular-sanitize,并引用
 7         --> 
 8         <span ng-bind-html="username"></span>
 9     </div>
10 
11     <script src="../node_modules/angular/angular.js"></script>
12     <script src="../node_modules/angular-sanitize/angular-sanitize.js"></script>
13     <script type="text/javascript">
14          // 使用本身定义的模块才能够依赖别的包里面定义的模块
15          // ng默认模块没有依赖任何模块
16          angular.module('app', ['sanitize'])
17     </script>

5.ng-cloak 在页面不显示{{ }}，在head导入Angular

<span ng-app ng-cloak>{{'222'}}</span>

6.ng-show ng-hide ng-if

1 <!-- 
2 ng-show:是否显示 true false
3 ng-hide:是否隐藏
4 ng-if:是否存在 
5 -->
6 <span ng-app ng-show="false">{{'222'}}</span>

7.ng-switch

 1 <body ng-app>
 2   <select ng-model="selected">
 3     <option value="1">1</option>
 4     <option value="2">2</option>
 5     <option value="3">3</option>
 6   </select>
 7   <div ng-switch="selected">
 8     <div ng-switch-when="1">
 9       <h1>1111</h1>
10     </div>
11     <div ng-switch-when="2">
12       <h1>2222</h1>
13     </div>
14     <div ng-switch-when="3">
15       <h1>3333</h1>
16     </div>
17     <div ng-switch-default>
18       <h1>0000</h1>
19     </div>
20   </div>
21 </body>

8.ng-checked

 1 <body ng-app>
 2   <p><input type="checkbox" ng-model="checked">全选</p>
 3   <ul>
 4     <li>选项1<input type="checkbox" ng-checked="checked"></li>
 5     <li>选项2<input type="checkbox" ng-checked="checked"></li>
 6     <li>选项3<input type="checkbox" ng-checked="checked"></li>
 7     <li>选项4<input type="checkbox" ng-checked="checked"></li>
 8     <li>选项5<input type="checkbox" ng-checked="checked"></li>
 9   </ul>
10 </body>

9.自定义指令

 <script>
   angular.module('app', [])

   //指令就是将html代码进行封装
   .directive('custDirective', [function(){
     // Runs during compile
     return {
       // 指令名
       // name: '',
       
       // priority多个指令设置在同一个元素上的执行优先级,
       // 执行顺序从低至高:1>2>3.priority的值为正整数，好比priority: 1,
       // priority: 1,
       
       // 若是为true,同一个元素上的其余指令的优先级高于本指令
       // terminal: true,
       
       // 指令默认能共享父 scope 中定义的属性
       // 能够定义一个隔离的scope
       // @：只能绑定字符串，因此一些简单的继承父scope的属性使用@
       // =：须要实现双向数据绑定的时候使用=，属性和父类的相等
       // &： 提供一种方式执行一个表达式在父scope的上下文中，即便用于将父scope中的函数绑定在指令的scope中
       // scope: {}, // {} = isolate, true = child, false/undefined = no change
       
       // controller: function($scope, $element, $attrs, $transclude) {},
       // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
      
       // 指定当前指令的类型 
       // E = 元素, <my-ment></my-menu>
       // A = 属性, <div my-ment></div>
       // C = 类,   <div class=my-menu></div>
       // M = html中的注释<!-- directive: my-menu -->  
       // <!-- 两边必定要留空格，否则什么都不会发生 -->
       //restrict: 'A', 
       
       //模板字符串
       template: '<div>我是指令的生成内容</div>',
       
       //导入一个html文件
       //templateUrl: 'template/demo.html',
       
       //是否用模板替换当前元素
       replace: true,

       // 是否使用ng-transculde来包含html中指令包含的原有的内容
       // transclude: true,
       

       // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
       link: function($scope, iElm, iAttrs, controller) {
         
       }
     };
   }]);
 </script>

（1）先说@


app.controller("ctl1", function ($scope) {
        $scope.name = "hello world";
    }).directive("testDirective", function () {
        return {
            scope: {
                name: "@"
            },
            template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">'
        }
})


<div ng-controller="ctl1">
   <div>
       <div>父scope：
           <div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name"/></div>
       </div>
       <div>隔离scope：这个显示为hello world
           <div test-directive name="{{name}}"></div>
       </div>
        <div>隔离scope（不使用{{name}}这个就直接显示为name了）：
             <div test-directive name="name"></div> 
         </div>
   </div>

咱们在test-directive指令所在的div上面，增长了一个name属性，要使用双花括号来给属性赋值。也能够写成nameCopy:'@nameForCtl',这样写，在给directive中的scope的属性赋值的时候，获取查询@后面的name这个标识对应的属性的值（这里nameForCtl在js中是驼峰写法，一样的在html中对应的属性名应该写成name-for-ctl）。不是很推荐这种写法，感受有点多余。

上一个例子中，咱们使用name="{{name}}"的形式来传递父scope 的属性对应的值，so，咱们只是把对应的值传递给了directive的scope，当我想实如今directive中改变父scope传递过来的值时，父scope中的值也对应的改变，显然用@这种方法走不通。html

app.controller("ctl1", function ($scope) {
        $scope.user = {
            name: 'hello',
            id: 1
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                user: "="
            },
            template: 'Say：{{user.name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="user.name"/>'
        }
    })

<div ng-controller="ctl1">
    <div>父scope：
        <div>Say：{{user.name}}<br>改变父scope的name：<input type="text" value="" ng-model="user.name"/></div>
    </div>
    <div>隔离scope：
        <div isolated-directive user="user"></div>
    </div>
    <div>隔离scope（使用{{name}}，这个会报错）：
        <div isolated-directive user="{{user}}"></div> 
    </div>
</div>

这一个例子和上一个例子不一样的地方就是属性赋值的时候，一个应该使用{{}},一个不应使用。=为了实现双向数据绑定，angular会使用‘=’对应的属性的值与父scope中的属性进行匹配，而后传递给diractive中的scope。至于实现的细节和原理，这里我就不说了（实际上是不大清楚）。java

（3）&node

& 方式提供一种途经使directive 能在父 scope 的上下文中执行一个表达式。此表达式能够是一个 function。其实说白了，就是可使用在父scope中定义的函数。angularjs

好比：当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 没法知道 directive 中发生了什么，也许你能够经过使用 angular 中的 event 广播来作到，可是必需要在 controller 中增长一个事件监听方法。
最好的方法就是让 directive 能够经过一个父 scope 中的 function，当 directive 中有什么动做须要更新到父 scope 中的时候，能够在父 scope 上下文中执行一段代码或者一个函数。npm

app.controller("ctl1", function ($scope) {
        $scope.value = "hello world";
        $scope.click = function () {
            $scope.value = Math.random();
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                action: "&"
            },
            template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>'
        }
    })

<div  ng-controller="ctl1">
        <div>父scope：
            <div>Say：{{value}}</div>
        </div>
        <div>隔离scope：
            <div isolated-directive action="click()"></div>
        </div>
</div>

在上面的例子中，咱们的属性action赋值为一个方法：action="click()"。api

9.过滤器

 1 <body ng-app="app">
 2 
 3 <!-- 
 4   将true或false传入到过滤器来肯定checkmark显示什么 
 5   可传递多参数 ：的形式
 6 -->
 7 <h1>{{true | checkmark : 1}}</h1>
 8 
 9 <script>
10   angular.module('app', [])
11          .filter('checkmark', function() {
12             
13             //过滤器执行的函数
14             return function(input, type){
15              
16               console.log(type);
17               
18               //input 传递进来的参数true或false、
19               // return input ? '\u2713' : '\u2718';
20               if (type == 1) {
21                 return '\u2713';
22               }else {
23                 return '\u2718';
24               }
25             }
26   });
27 </script>