【AngularJS】—— 11 指令的交互

style=”font-size: 13px; color: #000080;”>前面基本了解了命令的相关内容:

  1
怎么自定义指令

  2
令的复用

style=”font-size: 13px; color: #000080;”>本篇看一下下令中怎么相互。学习内容来自《慕课网
指令3》

  背景介绍

  这例是视频被的例证,有一个动感超人,有三种植能力,力量strength,速度speed,发光light。

  这三种植力量作为三种特性,定义动感超人作为一个标签,只要加上对应的习性就可知有该能力。

  为了便于结果的亮,为标签上加鼠标的响应事件,当鼠标移动至相应的价签上便见面触发一个方,打印出装有的力。

  程序分析

  html部分的代码如下:

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

  下面看看哪些促成,首先还是是创立一个模块:

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

  以拖欠模块的功底及,创建标签superman,与前面类似。

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这种控制器,而是指令对外开放的一个接口,里面声明的方,在表可以视作公开的道应用,其他的命可以通过依赖,使用这些主意。

  接下再创三单力量对应之命令

            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指定了依靠之命。

  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>

  运行结果:

相关文章