一，指令的创建
/*--Js code--*/
var app = angular.module("superhero",[]);
app.directive("superman",function(){
return {
restrict: "E",
template: "<div> Here I am to save the day </div>"
}
})
/*--HTML code--*/
<div ng-app="superhero">
<superman></superman>
</div>
这样可以创建一个指令。
二，指令的限制
restrict: "A", 表示指令是 对于 "attribute(属性)", restrict: "E", 表示指令是 对于 "Element(元素)",
再举一个例子：
/*--HTML code--*/
<div ng-app="superhero">
<div superman flash></div>
</div>
/*--Javascript code--*/
var app = angular.module("superhero",[]);
app.directive("superman",function(){
return{
restrict:"A",
link:function(){
alert("I am ok");
}
}
});
app.directive("flash",function(){
return{
restrict:"A",
link:function(){
alert("I am ok 222")
}
}
})
上面的例子不是Dom元素的修改，而是生成一个alert function.
三。基本行为
我们也可以添加一些方法:
/*--HTML code--*/
<div ng-app="behaviorApp">
<div enter leave>I‘m content</div>
</div>
/*--Javascript code--*/
var app = angular.module("behaviorApp", [])
app.directive("enter", function(){
return function(scope, element) {
element.bind("mouseenter", function(){
console.log("I‘m inside of you!");
})
}
});
app.directive("leave", function(){
return function(scope, element) {
element.bind("mouseleave", function(){
console.log("I‘m leaving on a jet plane!");
})
}
});
我们可以为这个指令添加了两个事件。