AngularJS指令

指令是AngularJS四大核心特性之一，另外三个特性是MVC、模块化和依赖注入还有双向数据绑定。

var myModule = angular.module("MyModule",[]);
myModule.directive("hello",function() {
  return {
    restrict:'AE',
    template:'<div>Hi everyone!</div>",
    replace:true
  }
});

restrict 匹配模式

E 元素 <my-menu title=”Products”></my-menu>

A 默认 属性 <div my-menu=”Products”></div>

C 样式类 <div class=”my-menu: Products”></div>

M 注释 <!- -  directive:my-menu Products - - >

最常用的是元素和属性的方式

当需要创建带有自己的模板的指令时，使用元素名称的方式创建指令

当需要为已有的HTML标签增加功能时，使用属性的方式创建指令

var myModule = angular.module("myModule",[]);
myModule.run(function($templateCache){
  $templateCache.put("hello.html","<div>Hello everyone!!!!</div>");
});
myModule.directive("hello",function($templateCache){
  return {
    restrict:"AECM,
    template:$templateCache.get("hello.html"),
    replace:true
  }
});

指令与控制器

<div ng-controller="myController">
  <loader howToLoad = "loadData()">滑动加载</loader>
</div>

var myModule = angular.module("myModule",[]);
myMlodule.controller("myController",["$scope",function($scope){
  $scope.loadData = function(){
    console.log("加载数据中...");
  }
}]);

myModule.directive("loader",function(){
  return {
  restrict:"AE",
  link:function(scope,element,attr){
    element.bind("mouseenter",function(){
    scope.loadData();
    }
  }
});

element.bind("mouseenter",function(){

scope.$apply("loadData()");

scope.$apply(attrs.howtoload);