美文网首页
自定义指令问题

自定义指令问题

作者: MGd | 来源:发表于2017-06-03 22:10 被阅读7次
    • 每自定义一个指令,都会有自己的作用域。
    • 默认情况下,指令当中的作用域与父作用域是同一个 ($scope就是同一个)
    父作用域的值发生变化,子作用域的值也发生变化。子作用域的值发生变化,父作用域也发生变化。
    
    • 非默认情况下,可以指定scope。scope值可以是bool 还可以是对象{}。
    • 当scope值是bool,为true时。

    • 代表的是独立作用域。第一次,父修改会影响子,一旦子作用域修改过之后,就变成独立作用域。
    • 互相不影响,如果子作用域没有 ,会默认找父作用。
    • 当scope值是bool,为false时(默认情况)

    • 使用的是同一个作用域,要改大家一起改。
     //1.创建模板
            var app = angular.module('app', []);
            //2.创建控制器
            app.controller('xmgController', ['$scope', function ($scope) {
                $scope.name = "我是父控制器的name";
            }]);
            app.directive('xmg',function () {
               return {
                   restrict:'EA',
                   template:'<h1>{{name}}</h1><input type="text" ng-model="name">',
                   controller:function ($scope) {
                   },
                   scope:false
               }
            });
        </script>
    </head>
    <body ng-app="app" ng-controller="xmgController">   //父作用域
       <input type="text" ng-model="name">
       <hr>
       <div xmg></div>   //子作用域 <h1>{{name}}</h1><input type="text" ng-model="name"> 
    </body>
    
    • 当scope值是对象的时候

    scope:{
                }
    当scope值是对象的时候,并且什么都不传入。
    
    • 隔离作用域,没有也会不找父作用域。
    • 当使用@修饰时
    • 外界可以传递数据到指令内部作用域。(父作用域中的值add/name/fatherAge传入到指令作用域中)
    • 把要传递的数据写到{}里面
    • 单项传递
    1.当使用@修饰时,传递数据必须得要使用插值语法{{父控制器的属性}}
    <div xmg age="{{fatherAge}}" address="{{}}">
    2.@特点:父作用域修改,子作用域也会修改,子作用域修改,不会影响父作用域。
    
    //1.创建模板
            var app = angular.module('app', []);
            //2.创建控制器
            app.controller('xmgController', ['$scope', function ($scope) {
                $scope.name = "我是父控制器的name";
                $scope.fatherAge = 'father传入的fatherAge';
                $scope.add = "我是父控制器的add";
            }]);
            app.directive('xmg',function () {
               return {
                   restrict:'EA',
                   template:'<input type="text" ng-model="age"><p>{{age}}</p><p>{{address}}</p>',
                   controller:function ($scope) {
                        $scope.name = "我是指令name";
                   },
                   scope:{
                       age:'@',
                       address:'@'
                   }
               }
            });
        </script>
    </head>
    <body ng-app="app" ng-controller="xmgController">
        <input type="text" ng-model="fatherAge">
        <p>{{fatherAge}}</p>
        <hr>
    // 外界可以传递数据到指令内部作用域。
        <div xmg age="{{fatherAge}}" address="{{add}}"></div>
    </body>
    
    • 当使用=修饰时
    • 1.外界传递数据时不用使用插值语法 直接跟属性名称即可
      <div xmg age="父属性名称" address="父属性名称"></div>
    • 2.=特点:父作用域改变,子作用随着改变。子作用域的改变也会影响到父作用的属性。
    • 属性的双向传递
    //1.创建模板
            var app = angular.module('app', []);
            //2.创建控制器
            app.controller('xmgController', ['$scope', function ($scope) {
                $scope.name = "我是父控制器的name";
                $scope.fatherAge = 'father传入的fatherAge';
                $scope.add = "我是父控制器的add";
            }]);
            app.directive('xmg',function () {
               return {
                   restrict:'EA',
                   template:'<input type="text" ng-model="age"><p>{{age}}</p><p>{{address}}</p>',
                   controller:function ($scope) {
                        $scope.name = "我是指令name";
                   },
                   scope:{
                       age:'=',
                       address:'='
                   }
               }
            });
        </script>
    </head>
    <body ng-app="app" ng-controller="xmgController">
        <input type="text" ng-model="fatherAge">
        <p>{{fatherAge}}</p>
        <hr>
        <div xmg age="fatherAge" address="add"></div>
    </body>
    
    • 当使用&修饰时
    • 代表外界传送一个方法进来(父作用域传递方法到子作用域),不会传送属性。
        //1.创建模板
            var app = angular.module('app', []);
            //2.创建控制器
            app.controller('xmgController', ['$scope', function ($scope) {
      //父作用域的方法(注意!!!!!!!!!!!!)
                    $scope.fatherMothod = function () {
                        alert('执行了父方法fatherMothod');
                    }
            }]);
            app.directive('gxq',function () {
               return {
                   restrict:'EA',
                   template:'<h1>{{name}}</h1> <p ng-click="show()">点我</p>',
                   controller:function ($scope) {
    
                   },
             scope:{
                       name:'@', 
                       age:'=', 
                       show:'&'   
                   }
               }
            });
        </script>
    </head>
    <body ng-app="app" ng-controller="xmgController">
    //父作品用域的方法fatherMothod()通过&修饰符传递到子作用域(注意!!!!!)
    <div gxq name="{{name}}" age="fatherAge" show="fatherMothod()"></div>
    //这里的fatherAge属性不会传递过来。(注意!!!!!!!!)
    </body>
    
    • directive(自定义指令)中cotroller/link

    • cotroller一般都是处理业务逻辑
    • link一般都是处理dom元素
            //1.创建模板
            var app = angular.module('app', []);
            //2.创建控制器
            app.controller('xmgController', ['$scope', function ($scope) {
    
            }]);
            app.directive('gxq',function () {
               return {
                   restrict:'EA',
                   template:'<div><h1 ng-click="hello()">hello</h1></div>',
                   replace:true,
                   controller:function ($scope) { //一般都是处理业务逻辑
                   },
                   link:function ($scope,ele,attr) { //一般都是处理dom元素。
                       var res = attr.xmgshow;
                       if (res == 'false'){
                           ele.css({
                               'display':'none'
                           });
                       }
                   },
               }
            });
        </script>
    </head>
    <body ng-app="app" ng-controller="xmgController">
    <gxq xmgshow="false"></gxq>
    
    • link中的ele代表的是<div><h1 ng-click="hello()">hello</h1></div>
    • link中的attr代表的是里面的属性

    相关文章

      网友评论

          本文标题:自定义指令问题

          本文链接:https://www.haomeiwen.com/subject/dhumfxtx.html