作用
- 用来引用其他
controller - 值可以为
- 字符串:
controller的名字 - 数组:包含
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>