Article reference
http://blog.csdn.net/u014788227/article/details/50416922
Description of require directive modification:
(no prefix) If there is no prefix, the directive will look in the controllers provided by itself, throwing an error if no controller is found.
? If the required controller is not found in the current command, null is passed as the fourth parameter to the link function.
^ If prefixed with ^, the directive will look up the command chain upstream for the controller specified by the require parameter.
?^ Combining the behavior of the previous two options, we optionally load the required instruction and look it up in the parent instruction chain.
Case number one:
<div class="container" ng-controller="MyController">
<parent>
<son></son>
<daughter></daughter>
</parent>
</div>
var myapp = angular.module("myApp");
myapp.controller("MyController", ['$scope', function($scope) {
$scope.name = "mario";
$scope.age = "13";
$scope.send = function() {
console.log('.............');
};
}]);
myapp.directive("parent", function() {
return {
restrict: 'E',
scope:{},
controller: function() {
// this.data = ['1', '2', '3', '4', '5'];
data = ['1', '2', '3', '4', '5'];
this.click = function() {
data.pop();
console.log(data);
};
},
link: function(scope, elem, attrs) {
scope.name = '123';
},
template: '<span>{{name}}<div ng-transclude></div></span>',
replace: true,
transclude: true
};
});
myapp.directive("son", function() {
return {
restrict: 'E',
repalce: true,
require: '^?parent',
template: '<div ng-click="sonClick()">sonClick</div>',
link: function(scope, elem, atts, ctrl) {
scope.sonClick = ctrl.click;
// tmp = ctrl.data;
// console.log(tmp);
// ctrl.data.pop();
}
};
});
myapp.directive("daughter", function() {
return {
restrict: 'E',
repalce: true,
require: '^?parent',
template: '<div ng-click="daughterClick()">daughterClick</div>',
link: function(scope, elem, atts, ctrl) {
scope.daughterClick = ctrl.click;
// tmp = ctrl.data;
// console.log(tmp);
}
};
});
Remarks: The two instructions son and daughter refer to the parent string (the parent instruction of the current instruction), but the link function refers to ctrl (represents the controller of the parent instruction ).
Case 2:
<hello>
<div>hello</div>
<beautiful good>
beautiful
</beautiful>
</hello>
app.directive("hello",function(){
return {
restrict : "E",
controller : function($scope){
$scope.name = "Zhang San";
this.information = {
name : $scope.name,
age : 25,
job : "programmer"
}
},
link : function(scope){
}
}
});
app.directive("beautiful",function(){
return {
restrict : "E",
require : "?good",
controller : function(){
this.name = "beautiful";
},
link : function (scope,element,attrs,good) {
console.log(good.name)
}
}
});
app.directive("good",function(){
return {
restrict : "A",
require : "?^hello",
controller : function(){
this.name = "good";
},
link : function (scope,element,attrs,hello) {
console.log(hello.information)
}
}
});