AngularJS—— 指令的複用

時間 2019-11-09

原文原文鏈接

首先看一下一個小例子，經過自定義指令，捕獲鼠標事件，並觸發控制器中的方法。javascript

　　單個控制器的標籤指令

　　依然是先建立一個模塊html

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

　　在模塊的基礎上，建立控制器和指令java

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方法，用於相應觸發事件，爲了便於觀察結果，添加了一個計數器。app

　　下面的指令採用了屬性和標籤元素的使用方式：「AE」，爲了獲得效果，建立了一個內嵌的模板（避免沒有內容時，點擊不到）。ui

　　並在link屬性的方法內，添加相應事件，方法中有三個參數：spa

　　1 scope，做用域，用於調用相應的做用域的方法。rest

　　2 element，指代建立的標籤htm

　　3 attr，用於擴展屬性，稍後展現使用方法事件

　　有了以上的準備工做，就能夠在body裏面使用標籤了：ip

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

　　實現的結果：