作用

用来引用其他controller
值可以为
1. 字符串:controller的名字
2. 数组:包含controller的名字的数组
引入之后我们能拿到的是绑定在this上面的属性和方法
一般与link相结合，通过link的第四个参数拿到引用的相关的数据

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><h1>{{indexName}}</h1><h2>{{childName}}</h2><!-- 自定义组件 --><div hello><div hello-world></div></div></div><script>var app = angular.module("myApp", []);app.controller("myCtrl", function ($scope) {$scope.indexName = "主页";$scope.childName = "父作用域";});app.directive("hello",function(){return {restrict:'A',controller:function(){this.sayName = function(){console.log("Sunwukong");}}}})app.directive("helloWorld",function(){return {restrict:'A',template:`<div><h2 ng-click="sayHisName()">{{childName}}</h2></div>`,controller:function($scope){$scope.childName = "自定义组件"},require:"^hello",link:function(scope,ele,attr,controller){console.log(controller);scope.sayHisName = controller.sayName}}});</script></body>
</html>

效果

注意这里的引用只能引用父组件的指令
我们注意到了require前面有一个^,他表示从自身以及父指令中寻找，找不到就报错，下面我们会一个一个介绍这些指令

前缀

无前缀

如果没有浅醉就会从自身所提供的控制器(指令)中查找，如果没有找到就会抛出一个错误，以以上代码为基础，如果把^去掉，那么，他就会报错

`^`

如上代码解释会在自身指令和父指令中寻找

`?`

表示在当前指令中寻找如果没有找到则将null传递给link的第四个参数
以以上代码为基础，我们修改如下

 controller:function($scope){$scope.childName = "自定义组件"},require:"?hellow",link:function(scope,ele,attr,controller){console.log(controller);}

因为没有hellow的指令所以他是找不到的，我们可以看打印
并没有报错，且第四个参数拿到的是null

`?^`

从当前的指令中寻找，找不到就去父级寻找，找不到link拿到的第四个参数为null

`^^`

直接从父级指令中寻找，如果没找到就报错

`ngModel`

博客链接

当我们require:ngModel他会查找查找定义在指令作当前用域中的ng-model
并且传入link的第四个参数为ngModelControll,可以观看上面的博客链接，他可以用于数据绑定，验证，css更新，格式化

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><h1>{{indexName}}</h1><h2>{{childName}}</h2><!-- 自定义组件 --><span>输入:</span><input ng-model="handleInput" type="text"><div hello-world ng-model="handleInput">Hello World</div></div><script>var app = angular.module("myApp", []);app.controller("myCtrl", function ($scope) {$scope.indexName = "主页";$scope.childName = "父作用域";});app.directive("helloWorld",function(){return {restrict:'A',controller:function($scope){$scope.childName = "自定义组件"},require:"^ngModel",link:function(scope,ele,attr,ngModel){console.log(ngModel);ngModel.$render = function(){console.log(ngModel.$viewValue)// 对于收集到的值可以做一些其他的操作...}}}});</script></body>
</html>

directive之require相关推荐

AngularJS控制器中的#39;this#39;与$ scope
本文翻译自:'this' vs $scope in AngularJS controllers In the "Create Components" section of Angu ...
【转】Build Your own Simplified AngularJS in 200 Lines of JavaScript
原文:http://blog.mgechev.com/2015/03/09/build-learn-your-own-light-lightweight-angularjs/ Build Your o ...
定制Directives
原文:https://code.angularjs.org/1.5.0-rc.0/docs/guide/directive 定制Directives 本文解释了怎么在你的Angular JS中实现自己 ...
html before table,Use greasemonkey to add HTML before table
问题 I am using greasemonkey to edit a page. I need to add my own table between the two tables that ar ...
Build Your Own Angularjs 读书笔记（AngularJS牛逼的地方在于它内嵌了一个表达式到Function对象的编译器。。。当然还有DI框架）
Build Your Own Angularjs 读书笔记目录 [隐藏] 1 项目配置 2 作用域 3 表达式与过滤器 4 模块与依赖注入 5 辅助函数 6 指令项目配置[编辑] npm pack ...
Angular学习心得之directive——require选项的细节
2019独角兽企业重金招聘Python工程师标准>>> 谈require选项之前,应该先说说controller选项,controller选项允许指令对其他指令提供一个类似接口的功能 ...
[AngularJS] Reusable directive, require from parent controller
Glorious Directives for Our Navigation NoteWrangler navigation has now been broken into two parts: t ...
Directive全面分析
说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...
AngularJS 指令中的require
require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数. 字符串或数组元素的值是会在当前指令的 ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

directive之require

作用

代码

效果

前缀

无前缀

`^`

`?`

`?^`

`^^`

`ngModel`

directive之require相关推荐

最新文章

热门文章