首页 > 代码库 > Angular JS (指令 directive)

Angular JS (指令 directive)

一,指令的创建

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

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

Angular JS (指令 directive)