Angular JS (指令 directive)

浏览数：43 / 时间：2015年06月09日

一，指令的创建

/*--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!");
      })
    }
});

我们可以为这个指令添加了两个事件。