angularjs directive

最新推荐文章于 2021-06-21 15:38:45 发布

原创最新推荐文章于 2021-06-21 15:38:45 发布 · 616 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

angularjs

1 篇文章

订阅专栏

本文深入解析Angular指令的隔离作用域机制，解释如何通过require参数实现指令间作用域的隔离与数据传递。包括实例演示、代码解析及关键概念说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

directive的隔离作用域:

隔离作用域隔离的是当前scope和模板中能访问到的作用域，模板中访问的总是隔离作用域中的值。

<body ng-app="myApp">
<div my-directive require="forTemplate">
{{require}}  <!-- 这个require访问不到 -->
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('MyCTRL',['$scope',function($scope){
               $scope.require = 'test require';
            }])
            .directive('myDirective',function(){
               return{
                   restrict : 'A',
                   controller:'MyCTRL',
                   template:'<a>{{require}}</a>', //这个reuqire值为'forTemplate'
                   scope:{
                      require: '@'
                   },
                   link: function(scope, element, attrs, ngModel){
                       // 这个scope.require输出的是MyCTRL中的require,值为'test require'
                        console.log(scope.require);
                   }
               }
            });
</script>
</body>

如果注释掉controller

<body ng-app="myApp">
<div my-directive require="forTemplate">
{{require}}  <!-- 这个require访问不到 -->
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('MyCTRL',['$scope',function($scope){
               $scope.require = 'test require';
            }])
            .directive('myDirective',function(){
               return{
                   restrict : 'A',
                   //controller:'MyCTRL',
                   template:'<a>{{require}}</a>', //这个reuqire值为'forTemplate'
                   scope:{
                      require: '@'
                   },
                   link: function(scope, element, attrs, ngModel){
                      //这里输出的也是forTemplate
                      console.log(scope.require);
                   }
               }
            });
</script>
</body>

注释掉controller, require,scope。

<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL"  my-directive req="forTemplate">

</div>
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('MyCTRL',['$scope',function($scope){
               $scope.require = 'test require';

            }])
            .directive('myDirective',function(){
               return{
                   restrict : 'A',
                   //controller:'MyCTRL',
                   //require : '^ngController',
                   template:'<a>{{require}}</a>', //模板中的require正常取值，这个值 是从上级作用域(MyCTRL)继承而来的
//                   scope:{
//                      req: '@'
//                   },
                   link: function(scope, element, attrs, ngModel){
                        console.log(scope); 
                          scope.$watch('require',function(oldValue,newValue,scope){
                            console.log(newValue); // ->test require
                            console.log(scope);
                        });
                   }
               }
            })
            .directive('divDirective',function(){
                return {
                    restrice:'A'
                }
            });
</script>
</body>

然后取消scope的注释

<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL"  my-directive req="forTemplate">

</div>
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('MyCTRL',['$scope',function($scope){
               $scope.require = 'test require';

            }])
            .directive('myDirective',function(){
               return{
                   restrict : 'A',
                   //controller:'MyCTRL',
                   //require : '^ngController',
                   template:'<a>{{require}}</a>', // 模板中的require取不到值
                   scope:{
                      req: '@'
                   },
                   link: function(scope, element, attrs, ngModel){
                        console.log(scope); // scope是指令内部的隔离作用域，没有require属性了，只有req属性。
                       scope.$watch('require',function(oldValue,newValue,scope){
                            console.log(newValue); // ->undefined
                            console.log(scope);
                        });
                   }
               }
            })
            .directive('divDirective',function(){
                return {
                    restrice:'A'
                }
            });
</script>
</body>

然后取消掉controller的注释

<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL"  my-directive req="forTemplate">

</div>
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('MyCTRL',['$scope',function($scope){
               $scope.require = 'test require';

            }])
            .directive('myDirective',function(){
               return{
                   restrict : 'A',
                   controller:'MyCTRL',
                   //require : '^ngController',
                   template:'<a>{{require}}</a>', // ->test require
                   scope:{
                      req: '@'
                   },
                   link: function(scope, element, attrs, ngModel){
                        console.log(scope); //这里scope既包含了require也包含了req
                        scope.$watch('require',function(oldValue,newValue,scope){
                            console.log(newValue); // ->test require
                            console.log(scope);
                        });
                   }
               }
            })
            .directive('divDirective',function(){
                return {
                    restrice:'A'
                }
            });
</script>
</body>

require参数

require参数的值是另一个指令的名称，require会将其值指定的指令的控制器(该指令的controller参数)注<br/>入到当前指令中，并作为当前指令的链接函数的第四个参数。
这里注意的是注入的是controller，而不是$scope。

<body ng-app="myApp">
<div ng-controller="MyCTRL">
    <div ng-model="MyCTRL"  my-directive req="forTemplate" div-directive>

    </div>
    <button ng-click="click($event)">click</button>
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            // 注意这里this和scope
            .controller('MyCTRL',['$scope',function($scope){
                var self = this;
                self.desc = "desc";
                $scope.require = 'test require';
                self.cFunc = function(){
                    console.log("c click");
                };
                $scope.click = function(element){
                    self.cFunc();
                    console.log(element);
                }
            }])
            .directive('myDirective',function(){
               return{
                   restrict : 'A',
                   controller:'MyCTRL',
                   scope:{
                      req: '@'
                   },
                   link: function(scope, element, attrs, ngModel){
                   }
               }
            })
            .directive('divDirective',function(){
                return {
                    restrice:'A',
                    // myDirecticve指令必须定义了controller才能require到
                    require:'^myDirective',
                    link: function(scope, element, attrs, ctrl){
                        // 注意这里ctrl是controller对象，而不是scope
                        console.log(ctrl); // -> desc
                    }
                }
            });
</script>
</body>