HTML
1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <div ng-controller="MyCtrl"> 8 <loader howToLoad="loadData()">滑动加载</loader> 9 </div> 10 <div ng-controller="MyCtrl2"> 11 <loader howToLoad="loadData2()">滑动加载</loader> 12 </div> 13 </body> 14 <script src="framework/angular-1.3.0.14/angular.js"></script> 15 <script src="Directive&Controller.js"></script> 16 </html>
JS
1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.loadData=function(){ 4 console.log("加载数据中..."); 5 } 6 }]); 7 myModule.controller('MyCtrl2', ['$scope', function($scope){ 8 $scope.loadData2=function(){ 9 console.log("加载数据中...22222"); 10 } 11 }]); 12 myModule.directive("loader", function() { 13 return { 14 restrict:"AE", 15 link:function(scope,element,attrs){ 16 element.bind('mouseenter', function(event) { 17 //scope.loadData(); 18 // scope.$apply("loadData()"); 19 // 注意这里的坑，howToLoad会被转换成小写的howtoload 20 scope.$apply(attrs.howtoload); 21 }); 22 } 23 } 24 });
知识扩展
restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使用
restrict 默认值为
EA, 即可以通过元素名和属性名来调用指令。
笔记整理：大漠穷秋