angular directive require属性的学习

文章参考

http://blog.csdn.net/u014788227/article/details/50416922

http://raowensheng.com/2014/05/09/angularjs%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E7%9A%84require%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E/

require指令修饰说明：

(没有前缀)如果没有前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器就抛出一个错误。

? 如果在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。

^ 如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。

扫描二维码关注公众号，回复： 301586 查看本文章

?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找。

案例一：

<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);
		}
	};
});

备注：son 和 daughter 这两个指令，引用的是parent这个字符串（当前指令的父指令），但是在link函数中引用的是ctrl（代表的是parent指令的控制器）。

案例二：

<hello>
    <div>hello</div>
    <beautiful good>
        beautiful
    </beautiful>
</hello>

app.directive("hello",function(){
    return {
        restrict : "E",
        controller : function($scope){
            $scope.name = "张三";
            this.information = {
                name : $scope.name,
                age : 25,
                job : "程序员"
            }
        },
        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)
        }
    }
});