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!");
　　　　 element.addClass("active");
      })
    }
});

app.directive("leave", function(){
 return function(scope, element) {
      element.bind("mouseleave", function(){
        console.log("I'm leaving on a jet plane!");
　　　　 element.removeClass("active");           // 能够进行样式的控制
      })
    }
});

咱们能够为这个指令添加了两个事件。

四. 用 attrs 重构一下
/*--HTML code--*/
<div ng-app="behaviorApp">
  <div enter="panel" leave>I'm content</div>
</div>

/*--Javascript code--*/
var app = angular.module("behaviorApp", [])

app.directive("enter", function () {
  return function (scope, element, attrs) {
    element.bind("mouseenter", function () {
      element.addClass(attrs.enter);
    });
  };
});
app.directive("leave", function () {
  return function (scope, element, attrs) {
    element.bind("mouseleave", function () {
      element.removeClass(attrs.enter);
    });
  };
});