码迷,mamicode.com
首页 > 其他好文 > 详细

Angular学习心得之directive——require选项的细节

时间:2015-05-06 23:11:30      阅读:440      评论:0      收藏:0      [点我收藏+]

标签:

       谈require选项之前,应该先说说controller选项,controller选项允许指令对其他指令提供一个类似接口的功能,只要别的指令(甚至是自己)有需要,就可以获取该controller,将其作为一个对象,并取得其中的所有内容。而require就是连接两个指令的锁链,它可以选择性地获取指令中已经定义好的controller,并作为link函数的第四个参数传递进去,link函数的四个参数分别为scope,element,attr和someCtrl,最后一个就是通过require获取的controller的名字,对于controller的名字,可以在指令中用controllerAs选项进行定义,这是发布控制器的关键.

      具体如何获取controller呢?require选项的值可以分别用前缀?、^ 和?^进行修饰,也可以不修饰。

      如果不进行修饰,比如require:‘thisDirective‘,那么require只会在当前指令中查找控制器

      如果想要指向上游的指令,那么就是用^进行修饰,比如require:‘^parentDirective‘,如果没有找到,那就会抛出一个错误。

      如果使用?前缀,就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数;

      那么,如果将?和^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误。

      现在问题来了,如果我想指定多于一个指令,那怎么办呢?这时,我们可以将需要的指令放进一个数组中,例如:require:[‘^?firstDirective‘,‘^?secondDirective‘,‘thisDirective‘],这不正是依赖注入的形式吗?但要注意一点,如果使用这种写法的话,原先指令中发布的控制器的名字,即controllerAs选项,就失去意义了。此时,我们在link中调用这些指令的controller的方法变为:先为上边的数组定义一个名字,接着根据其下标号来指定具体的某个指令。类似于:ctrlList[0]。

      好,准备工作完毕,接下来通过一个大杂烩的实例来实践require选项。我想实现的效果是,在主指令中,分别指定父级指令中的增加与减少的操作。

JS代码:

增加操作的指令:

.directive("add",function(){
        return{
            restrict:‘ECMA‘,
            controller:function($scope){
                $scope.count=0;
                this.addCount=function(){
                    $scope.$apply(function(){
                        $scope.count++;
                    })
                }
            }
        }
    })

减少操作的指令:

.directive("minor",function(){
        return{
            restrict:‘ECAM‘,
            controller:function($scope){
                this.reduceCount=function(){
                    $scope.$apply(function(){
                        $scope.count--;
                    })
                }
               
            }
        }
    })

主指令:

.directive("figure",function(){
        return{
            restrict:‘ECMA‘,
            template:‘<button id="add" class="btn btn-default">增加</button>‘+
                     ‘<button id="minor" class="btn btn-danger">减少</button>‘+
                     ‘<div>{{ figureCtrl.temp }}</div>‘,
            require:[‘?^add‘,‘?^minor‘],
            controller:function(){
                this.temp="这个属性被隔离开,可通过controllerAs创建的动态对象调用";
            },
            controllerAs:‘figureCtrl‘,
            link:function(scope,element,attrs,resultCtrl){

            angular.element(document.querySelector(‘#minor‘)).on(‘click‘,resultCtrl[1].reduceCount);
            angular.element(document.querySelector(‘#add‘)).on(‘click‘,resultCtrl[0].addCount);
               
        }
        }
    })

HTML代码:

<add minor class="col-md-2 col-md-offset-3">
          <div >次数: {{ count }}</div>
          <figure></figure>
      </add>

运行结果如下图:

技术分享

注意点:

1.由于add和minor指令都已被注入resultCtrl数组中,所以想调用它们的控制器中的方法,就可以使用resultCtrl[i].fun()的方式;

2.更新count的值,但视图是不会改变的,所以需要通过手动$apply()的方式来更新;

3.controllerAs实际上是把controller创建为一个对象,并且是隔离的。

大功告成!但还是希望大神们能毫不吝啬地对我的文章进行指点和纠正,谢谢!

Angular学习心得之directive——require选项的细节

标签:

原文地址:http://my.oschina.net/u/2342955/blog/411508

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!