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

谈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创建为一个对象,并且是隔离的。

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

时间: 2024-12-16 08:21:13

Angular学习心得之directive——require选项的细节的相关文章

Angular学习心得之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

AngularJS学习笔记之directive&mdash;scope选项与绑定策略

From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时

angular学习(十二)—— Directive

directive介绍 directive是DOM元素上的标记,告诉angularjs的HTML编译器($complile)给DOM元素附加上一些特殊的行为,或者是改变DOM元素和它的子元素. 看到编译两个字,很多人会感到很懵,javascript不是解释执行的吗.其实这里的编译是因为,给html附加directive的递归过程很像是编译源代码的过程,所以才叫编译. angularjs内置了一套directive,像ngBind, ngModel和ngClass.就像你创建controller和

angular学习之directive

Angular对directive的定义是一段代码片段,你 可以用它来操作DOM 使用directive可以实现事件的绑定module.directive( "addBookButton", [ 'Book', function( Book ) { return { restrict: "A", link: function( scope, element, attrs ) { element.bind( "click", function()

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv

angular的GitHub Repository Directive Example学习

angular的GitHub Repository Directive Example学习 运行下面代码 <!DOCTYPE html><html ng-app="myApp"><head>     <meta charset="utf-8" />     <title>GitHub Repository Directive Example</title>       <script sr

详说Angular之指令(directive)

前言 angular核心部分如下图几大块,最重要的莫过于指令这一部分,本文将重点讲解指令这一部分,后续笔者将通过陆续的学习来叙述其他如:factory.service等,若有叙述错误之处,欢迎各位指正以及批评.本文将通过一些实例来进行叙述. 话题 restrict以及replace 在sublimeText中安装angular插件之后,我们需要创建指令时此时将自动出现如下定义:所以我们将重点放在如下各个变量的定义. .directive('', ['', function(){ // Runs

我的MYSQL学习心得(十三)

我的MYSQL学习心得(十三) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL学习心得(六) 我的MYSQL学习心得(七) 我的MYSQL学习心得(八) 我的MYSQL学习心得(九) 我的MYSQL学习心得(十) 我的MYSQL学习心得(十二) 这一篇<我的MYSQL学习心得(十三)>将会讲解MYSQL的用户管理 在mysql数据库中,有mysql_install_db脚本初始