angularjs directive
directive的隔离作用域:
隔离作用域隔离的是当前scope和模板中能访问到的作用域，模板中访问的总是隔离作用域中的值。
<body ng-app="myApp">
<div my-directive require="forTemplate">
{{require}}
div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MyCTRL',['$scope',function($scope){
$scope.require = 'test require';
}])
.directive('myDirective',function(){
return{
restrict : 'A',
controller:'MyCTRL',
template:'{{require}}', //这个reuqire值为'forTemplate'
scope:{
require: '@'
},
link: function(scope, element, attrs, ngModel){
// 这个scope.require输出的是MyCTRL中的require,值为'test require'
console.log(scope.require);
}
}
});
script>
body>如果注释掉controller
<body ng-app="myApp">
<div my-directive require="forTemplate">
{{require}}
div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MyCTRL',['$scope',function($scope){
$scope.require = 'test require';
}])
.directive('myDirective',function(){
return{
restrict : 'A',
//controller:'MyCTRL',
template:'{{require}}', //这个reuqire值为'forTemplate'
scope:{
require: '@'
},
link: function(scope, element, attrs, ngModel){
//这里输出的也是forTemplate
console.log(scope.require);
}
}
});
script>
body>注释掉controller, require,scope。
<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL" my-directive req="forTemplate">
div>
div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MyCTRL',['$scope',function($scope){
$scope.require = 'test require';
}])
.directive('myDirective',function(){
return{
restrict : 'A',
//controller:'MyCTRL',
//require : '^ngController',
template:'{{require}}', //模板中的require正常取值，这个值 是从上级作用域(MyCTRL)继承而来的
// scope:{
// req: '@'
// },
link: function(scope, element, attrs, ngModel){
console.log(scope);
scope.$watch('require',function(oldValue,newValue,scope){
console.log(newValue); // ->test require
console.log(scope);
});
}
}
})
.directive('divDirective',function(){
return {
restrice:'A'
}
});
script>
body>
然后取消scope的注释
<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL" my-directive req="forTemplate">
div>
div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MyCTRL',['$scope',function($scope){
$scope.require = 'test require';
}])
.directive('myDirective',function(){
return{
restrict : 'A',
//controller:'MyCTRL',
//require : '^ngController',
template:'{{require}}', // 模板中的require取不到值
scope:{
req: '@'
},
link: function(scope, element, attrs, ngModel){
console.log(scope); // scope是指令内部的隔离作用域，没有require属性了，只有req属性。
scope.$watch('require',function(oldValue,newValue,scope){
console.log(newValue); // ->undefined
console.log(scope);
});
}
}
})
.directive('divDirective',function(){
return {
restrice:'A'
}
});
script>
body>然后取消掉controller的注释
<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL" my-directive req="forTemplate">
div>
div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MyCTRL',['$scope',function($scope){
$scope.require = 'test require';
}])
.directive('myDirective',function(){
return{
restrict : 'A',
controller:'MyCTRL',
//require : '^ngController',
template:'{{require}}', // ->test require
scope:{
req: '@'
},
link: function(scope, element, attrs, ngModel){
console.log(scope); //这里scope既包含了require也包含了req
scope.$watch('require',function(oldValue,newValue,scope){
console.log(newValue); // ->test require
console.log(scope);
});
}
}
})
.directive('divDirective',function(){
return {
restrice:'A'
}
});
script>
body>require参数
require参数的值是另一个指令的名称，require会将其值指定的指令的控制器(该指令的controller参数)注
入到当前指令中，并作为当前指令的链接函数的第四个参数。
这里注意的是注入的是controller，而不是$scope。
<body ng-app="myApp">
<div ng-controller="MyCTRL">
<div ng-model="MyCTRL" my-directive req="forTemplate" div-directive>
div>
<button ng-click="click($event)">clickbutton>
div>
<script type="text/javascript">
angular.module('myApp',[])
// 注意这里this和scope
.controller('MyCTRL',['$scope',function($scope){
var self = this;
self.desc = "desc";
$scope.require = 'test require';
self.cFunc = function(){
console.log("c click");
};
$scope.click = function(element){
self.cFunc();
console.log(element);
}
}])
.directive('myDirective',function(){
return{
restrict : 'A',
controller:'MyCTRL',
scope:{
req: '@'
},
link: function(scope, element, attrs, ngModel){
}
}
})
.directive('divDirective',function(){
return {
restrice:'A',
// myDirecticve指令必须定义了controller才能require到
require:'^myDirective',
link: function(scope, element, attrs, ctrl){
// 注意这里ctrl是controller对象，而不是scope
console.log(ctrl); // -> desc
}
}
});
script>
body>