AngularJS 指令中的require
require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。
字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。指令得require参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为:
? 在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数。
^ 指令会在上游的指令链中查找require参数所指定的控制器。
?^ 将前面两个选项的行为组合起来,选择地加载需要的指令并在父指令链中进行查找。
没有前缀 指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误。
例子:
angular.module('myApp',[])
//定义第一个指令 bookList
.directive('bookList',function(){
return {
restrict:'ECAM',
controller:function($scope){
$scope.books=[
{name:'php'},{name:'javascript'},{name:'java'}
];
this.addBook=function(){
$scope.$apply(function(){
$scope.books.push({name:'Angularjs'});
});
}
},
controllerAs:'bookListController',
//这个template中使用了第二个指令bookAdd
template:'<div><ul><li ng-repeat="book in books">{{ book.name }}</li></ul> <book-add></book-add> </div>',
replace:true
}
})
//定义第二个指令 bookAdd
.directive('bookAdd',function(){
return{
restrict:'ECAM',
require:'^bookList', //这是个指令名
template:'<button type="button">添加</button>',
replace:true,
link:function(scope,iElement,iAttrs,bookListController){ //这里引用了bookList指令的控制器
iElement.on('click',bookListController.addBook);
}
}
})
.controller('firstController',['$scope',function($scope){
}])
AngularJS 指令中的require的更多相关文章
- angularjs指令中的require赋值含义
前缀 寻找路劲 没有找到控制器是否抛错? 例如 Link函数中第四个参数 (no prefix) 当前指令的DOM 抛错 tabset 找到的Controller对象 ? 当前指令的DOM 不抛错 ? ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angular指令中,require和transclude同时设置为true时的作用
最近在学习angularJS指令的时候,对指令对象中require属性和transclude属性同时设置为true比较疑惑,于是自己动手测试一下具体差异 index.html: <simple& ...
- AngularJs 指令directive之require
controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require An ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...
- AngularJs -- 指令中使用子作用域
下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...
随机推荐
- iOS.-.cxx_destruct
-.cxx_destruct 方法: 该方法是由编译器生成的方法. 1. “ARC actually creates a -.cxx_destruct method to handle freeing ...
- POJ2728 Desert King
一道生成树+\(0/1\)分数规划 原题链接 设每条边的距离为\(dis[x]\),两点高度差为\(h[x]\),该图的生成树为\(T\),则题目实际求的就是\(\dfrac{\sum\limits_ ...
- Python学习1 基础数据类型
一.字符串 1.去除首尾字符 str_test = 'Hello World!' str_test.split()#将字符串分割为列表str_test. ...
- c++ boost 苹果内购 IAP验证
// 1111.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <cstdlib> #include <i ...
- vue引用公用的头部和尾部文件。
我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...
- Hadoop的本地库(Native Libraries)介绍
Hadoop是使用Java语言开发的,但是有一些需求和操作并不适合使用java,所以就引入了本地库(Native Libraries)的概念,通过本地库,Hadoop可以更加高效地执行某一些操作. 目 ...
- jsp页面错误的全局处理
网上搜索spring mvc项目全局异常处理: 大致可以找到两种方案 : 方案1: ExceptionHandlerResolver . spring 提供了两种默认实现,当然你也可以自己实现.. 方 ...
- linux系统,在centos7环境下安装jdk步骤
记录一下安装jdk1.8版本的出错过程: 按照这个博客内容安装的,以及修改文件权限博客 [Linux]CentOS7下安装JDK详细过程 [Linux]目录文件权限的查看和修改[转] 1.安装的jdk ...
- 进入快速通道的委托(深入理解c#)
1.方法组:所有的名称相同的重载方法合在一起就成为一个方法组. 2.协变性和逆变性: 协变性指的是——泛型类型参数可以从一个派生类隐式转化为基类. 逆变性指的是——泛型类型参数可以从一个基类隐式转化为 ...
- 2019.01.10 bzoj1095: [ZJOI2007]Hide 捉迷藏(动态点分治)
传送门 蒟蒻真正意义上做的第一道动态点分治! 题意:给一棵最开始所有点都是黑点的树,支持把点的颜色变成从黑/白色变成白/黑色,问当前状态树上两个最远黑点的距离. 思路: 首先考虑不带修改一次点分治怎么 ...