【AngularJS】—— 10 指令的复用

时间 2019-11-19

原文原文链接

前面练习了如何自定义指令，这里练习一下指令在不一样的控制器中如何复用。javascript

　　—— 来自《慕课网指令3》html

　　首先看一下一个小例子，经过自定义指令，捕获鼠标事件，并触发控制器中的方法。java

　　单个控制器的标签指令

　　依然是先建立一个模块app

var myAppModule = angular.module("myApp",[]);

　　在模块的基础上，建立控制器和指令ide

myAppModule.controller("myAppCtrl",["$scope",function($scope){ $scope.count = 0; $scope.loadData = function(){ $scope.count = $scope.count+1; console.log("myAppCtrl load data!"+$scope.count); } }]); myAppModule.directive("loader",function(){ return{ restrict:"AE", transclude:true, template:"<div><div ng-transclude></div></div>", link:function(scope,element,attr){ element.bind("mouseenter",function(){ // scope.loadData();
                            scope.$apply("loadData()"); }); } } });

　　首先看一下建立的控制器，在其中建立了一个loadData方法，用于相应触发事件，为了便于观察结果，添加了一个计数器。ui

　　下面的指令采用了属性和标签元素的使用方式：“AE”，为了获得效果，建立了一个内嵌的模板（避免没有内容时，点击不到）。spa

　　并在link属性的方法内，添加相应事件，方法中有三个参数：rest

　　1 scope，做用域，用于调用相应的做用域的方法。code

　　2 element，指代建立的标签htm

　　3 attr，用于扩展属性，稍后展现使用方法

　　有了以上的准备工做，就能够在body里面使用标签了：

<div ng-controller="myAppCtrl">
            <loader howToLoad="loadData()">第一个loader!</loader>
        </div>

　　如何复用指令

　　以上仅仅是单个控制器的指令使用，一个指令在一个页面中能够被屡次使用，也就意味着，会有多个控制器使用该指令。

　　那么指令如何知道调用控制器的那个方法呢？这就用到了attr属性。

　　在建立指令时，调用attr获取属性的值

myAppModule.directive("loader",function(){ return{ restrict:"AE", transclude:true, template:"<div><div ng-transclude></div></div>", link:function(scope,element,attr){ element.bind("mouseenter",function(){ // scope.loadData();
                            // scope.$apply("loadData()");
 scope.$apply(attr.howtoload); }); } } });

　　就能够在body中按照以下的方式使用了：

<div ng-controller="myAppCtrl">
            <loader howToLoad="loadData()">第一个loader!</loader>
        </div>
        <div ng-controller="myAppCtrl2">
            <loader howToLoad="loadData2()">第二个loader!</loader>
        </div>

　　须要注意的是：

　　1 标签中属性使用驼峰法命名，在指令中要转换成所有小写。

　　2 指令中调用的仅仅是属性的名字，没有方法括号。

　　3 应用时，属性对应的值是该控制器内声明的执行方法。

　　下面看一下样例代码：

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="myAppCtrl">
            <loader howToLoad="loadData()">第一个loader!</loader>
        </div>
        <div ng-controller="myAppCtrl2">
            <loader howToLoad="loadData2()">第二个loader!</loader>
        </div>
        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",["$scope",function($scope){ $scope.count = 0; $scope.loadData = function(){ $scope.count = $scope.count+1; console.log("myAppCtrl load data!"+$scope.count); } }]); myAppModule.controller("myAppCtrl2",["$scope",function($scope){ $scope.count = 0; $scope.loadData2 = function(){ $scope.count = $scope.count+1; console.log("myAppCtrl2 load data!"+$scope.count); } }]); myAppModule.directive("loader",function(){ return{ restrict:"AE", transclude:true, template:"<div><div ng-transclude></div></div>", link:function(scope,element,attr){ element.bind("mouseenter",function(){ // scope.loadData();
                            // scope.$apply("loadData()");
 scope.$apply(attr.howtoload); }); } } }); </script>
    </body>
</html>

　　实现的结果：