angularjs directive

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值