【AngularJS】—— 11 指令的交互

    阅读目录

  •   程序分析
  •   全部程序代码:

前面基本了解了指令的相关内容:

  1 如何自定义指令

  2 指令的复用

本篇看一下指令之间如何交互。学习内容来自《慕课网 指令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>

  运行结果:

时间: 2024-10-11 01:33:59

【AngularJS】—— 11 指令的交互的相关文章

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--> <sc

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

AngularJS之指令

紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界. 在上篇博客的前言部分提到,Angular的核心就是对HTML标签的增强.我们用到的诸如ng-app.ng-controller等等这些都是属于Angular指令,具体点,它们为Angular内置的指令. Angular不仅提供了内置指令,它还允许我们自定义指令,不然Angular就太low咯.

跟我学AngularJs:Directive指令用法解读(下)

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

跟我学AngularJs:Directive指令用法解读(上)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要: Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性

AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解

1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 [html] <button ng-click="count = count + 1" ng-init="count=0"> Increment  </button> <span>  count: {{count}}  </span> (2)ng-dblclick 鼠标双击事件 [html] <button ng-dblclick="

带你走近AngularJS - 体验指令实例

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------------------------------------------------------------------------------------------ 之前我们已经介绍了所有的AngularJS 基础知识,下面让我们通过实例来加深记忆,体验自定义指令的乐趣. 手风琴指令 我们展示的第

AngularJS自定义指令详解(有分页插件代码)

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

angularjs自定义指令绑定策略---‘&’绑定

接着上一篇 理解了"="和"@"绑定之后再来理解"&"绑定,就很简单了,同理,用"桥梁"进行分析,但还是有一些例外的情况,要不然angularjs也不会单独设定一个绑定策略,看案例先: <!DOCTYPE html><html lang="en" ng-app="MyModule"><head>    <meta charset=&quo