<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<hello><div>this is transclude </div></hello>
<h1>自定义指令同controller交互</h1>
<div ng-controller="myCtrl">
<loader>加载数据</loader>
</div>
<h1>自定义指令通过属性进行调用</h1>
<div ng-controller="myCtrl1">
<loader1 howtoload="loadata1()">加载数据1</loader1>
</div>
<div ng-controller="myCtrl2">
<loader1 howtoload="loadata2()">加载数据2</loader1>
</div>
<h1>指令之间的操作</h1>
<superman>动感超人什么都没有</superman><br>
<superman light>动感超人 有光</superman>
<br/>
<superman light speed>动感超人 有光 有速度</superman>
<br/>
<superman light speed strength>动感超人 有光 有速度 有力量</superman>
<br/>
<h1>scope绑定策略</h1>
<ul>
<li>@ 传递字符串</li>
<li>= 与父作用域进行双向绑定的</li>
<li>& 调用父作用域的函数方法</li>
</ul>
<div ng-controller="drinkCtrl">
<drink flavor="{{flavor}}"></drink>
<hr/>
CTRL:
<input type="text" ng-model="flavor"/><br/>
dirctive:
<drink1 flavor="flavor"></drink1>
</div>
<hr/>
<div ng-controller="greetingCtrl">
<greeting greet="sayhello(name)"></greeting>
</div>
</div>
<script src="../../lib/angularjs/angular.min.js"></script>
<script>
var myModule = angular.module("myModule",[]);
/**
* myModule.run(function($templateCache){
*
* $templateCache.put("hello.html","<div>hello everyOne</div>")
* }
* )
*/
//myModule.directive("hello",function($templateCache){
myModule.directive("hello",function(){
return {
restrict:"AEMC",
template:"<div>Hi EveryOne!<div ng-transclude=''></div></div>",
//transclude:true,
//templateUrl:"hello.html",
//template:$templateCache.get("hello.html"),
//replace:true
transclude:true
}
});
myModule.controller("myCtrl",function($scope){
$scope.loadata = function(){
console.log("load data");
}
});
myModule.controller("myCtrl1",function($scope){
$scope.loadata1 = function(){
console.log("load data1");
}
});
myModule.controller("myCtrl2",function($scope){
$scope.loadata2 = function(){
console.log("load data2");
}
});
myModule.directive("loader",function(){
return {
restrict:"AE",
link:function(scope,element,attr){
element.bind("mouseenter",function(){
// scope.loadata1();
scope.$apply("loadata()");
});
}
}
});
myModule.directive("loader1",function(){
return{
restrict:"E",
link:function(scope,element,attr){
element.bind("mouseenter",function(){
// scope.loadata1();
// console.log("test...");
scope.$apply(attr.howtoload);
});
}
}
});
myModule.directive("superman",function(){
return {
scope:{},//指定独立作用域
restrict:"E",
controller:function($scope){
$scope.abilities=[];
this.addStrength=function(){
$scope.abilities.push("strength");
};
this.addSpeed = function(){
$scope.abilities.push("speed");
};
this.addLight = function(){
$scope.abilities.push("Light");
}
},
link:function(scope,element,attr){
element.bind("mouseenter",function(){
console.log(scope.abilities);
});
}
}
});
myModule.directive("strength",function(){
return{
require:"^superman",
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addStrength();
}
}
});
myModule.directive("speed",function(){
return{
require:"^superman",
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addSpeed()
}
}
});
myModule.directive("light",function(){
return{
require:"^superman",
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addLight();
}
}
});
myModule.controller("drinkCtrl",function($scope){
$scope.flavor="baiwei + liquan";
})
myModule.directive("drink",function(){
return{
restrict:"AE",
template:"<div>{{flavor}}</div>",
scope:{
flavor:"@"//传递字符串对象
}
// link:function(scope,element,attr){
// scope.flavor = attr.flavor;
// }
}
})
myModule.directive("drink1",function(){
return{
restrict:"AE",
template:"<input type='text' ng-model='flavor'>",
scope:{
flavor:"="//与父对象进行双向绑定
}
// link:function(scope,element,attr){
// scope.flavor = attr.flavor;
// }
}
});
myModule.controller("greetingCtrl",function($scope){
$scope.sayhello=function(name){
alert("Hello "+ name);
}
});
myModule.directive("greeting",function(){
return {
restrict:"AE",
scope:{
greet:"&"
},
template:"<input type='text' ng-model='userName'><br/>"+
"<button ng-click='greet({name:userName})'>测试{{userName}}</button>"
}
});
</script>
</body>
</html>
