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);

相关文章