AngularJS 笔记整理 link函数 为元素绑定鼠标事件

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, 即可以通过元素名和属性名来调用指令。

 

笔记整理：大漠穷秋

 

posted @ 2016-10-18 10:54  星河mio  阅读(328)  评论(0)  编辑  收藏  举报