AngularJS—— 指令的交互

時間 2019-12-01

標籤 angularjs 指令交互欄目 AngularJS 简体版

原文原文鏈接

背景介紹javascript

　　這例子是視頻中的例子，有一個動感超人，有三種能力，力量strength，速度speed，發光light。html

　　這三種能力做爲三種屬性，定義動感超人做爲一個標籤，只要添加對應的屬性就能擁有該能力。java

　　爲了便於結果的展現，爲標籤添加鼠標的響應事件，當鼠標移動到對應的標籤上就會觸發一個方法，打印出具有的能力。app

　　程序分析

　　html部分的代碼以下：ui

<div>
            <superman>nothing!</superman>
            <superman strength >strength!</superman>
            <superman strength speed >strength speed!</superman>
            <superman strength speed light >strength speed light!</superman>
        </div>

　　下面看看如何實現，首先依然是建立一個模塊：this

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

　　在該模塊的基礎上，建立標籤superman，與前面相似。spa

myAppModule.directive("superman",function(){
                return{
                    scope:{},
                    restrict:'AE',
                    transclude:true,
                    template:"<div><div ng-transclude></div></div>",
                    controller:function($scope){
                        $scope.abilities = [];
                        this.addStrength = function(){
                            $scope.abilities.push("strength");
                        };
                        this.addSpeed = function(){
                            $scope.abilities.push("speed");
                        };
                        this.addLight = function(){
                            $scope.abilities.push("light");
                        };
                    },
                    link:function(scope,element,attr){
                        element.bind("mouseenter",function(){
                            console.log(scope.abilities);
                        });
                    }
                }
            });

　　這裏不一樣的是，在方法內部有一個controller屬性，這個並非ng-controller這種控制器，而是指令對外開放的一個接口，裏面聲明的方法，在外部能夠做爲公開的方法使用，其餘的指令能夠經過依賴，使用這些方法。rest

　　接下來再建立三個能力對應的指令視頻

myAppModule.directive("strength",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addStrength();
                    }
                }
            });
            myAppModule.directive("speed",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addSpeed();
                    }
                }
            });
            myAppModule.directive("light",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addLight();
                    }
                }
            });

　　三個指令的代碼都差很少，其中require指定了依賴的指令。htm

　　link中多了一個參數supermanCtrl，這個參數猜測是superman中的controller，因此命名採用superman+Ctrl的方式。

　　【因爲不懂內部原理，這裏僅僅是猜測，可是實驗證實，若是改變這個參數的名字，會報錯。】

　　聲明瞭這三個指令，就能夠把這三個指令當作super的屬性來使用，當註明該屬性時，就會觸發內部的link內的方法，調用superman中公開的方法。

　　總結起來，指令的交互過程：

　　1 首先建立一個基本的指令，在controller屬性後，添加對外公開的方法。

　　2 建立其餘交互的指令，在require屬性後，添加對應的指令依賴關係；在link中調用公開的方法

　　所有程序代碼：

<!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>
            <superman>nothing!</superman>
            <superman strength >strength!</superman>
            <superman strength speed >strength speed!</superman>
            <superman strength speed light >strength speed light!</superman>
        </div>
        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.directive("superman",function(){
                return{
                    scope:{},
                    restrict:'AE',
                    transclude:true,
                    template:"<div><div ng-transclude></div></div>",
                    controller:function($scope){
                        $scope.abilities = [];
                        this.addStrength = function(){
                            $scope.abilities.push("strength");
                        };
                        this.addSpeed = function(){
                            $scope.abilities.push("speed");
                        };
                        this.addLight = function(){
                            $scope.abilities.push("light");
                        };
                    },
                    link:function(scope,element,attr){
                        element.bind("mouseenter",function(){
                            console.log(scope.abilities);
                        });
                    }
                }
            });
            myAppModule.directive("strength",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addStrength();
                    }
                }
            });
            myAppModule.directive("speed",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addSpeed();
                    }
                }
            });
            myAppModule.directive("light",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addLight();
                    }
                }
            });
        </script>
    </body>
</html>

　　運行結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。