AngularJS【AngularJS】—— 10 指令的复用

style=”font-size: 13px; color: #000080;”>前边磨练了哪些自定义指令,那里陶冶一下下令在不相同的控制器中如何复用。

  —— 来自《 style=”color: #000080;”>慕课网 指令3》

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

  单个控制器的标签指令

  如故是先创制一个模块

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.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方法,用于相应触发事件,为了有利于观看结果,添加了一个计数器。

  上面的吩咐采纳了性能和标签元素的施用办法:“AE”,为了取得效果,创造了一个内嵌的模版(幸免没有内容时,点击不到)。

  并在link属性的办法内,添加相应事件,方法中有多个参数:

  1
scope,功能域,用于调用相应的成效域的章程。

  2
element,指代创设的标签

  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>

  已毕的结果:

AngularJS 1

相关文章