指令与控制器交互，指令与指令交互

我会带着你远行 2022-08-20 12:24 143阅读 0赞

慕课网《AngularJS实战》–指令3笔记，点击打开链接

## 一、不同指令对应不同控制器方法（指令的复用） ##

Directive&Controller.js

var myModule = angular.module("MyModule", []);
    myModule.controller('MyCtrl', ['$scope', function($scope){ 
        $scope.loadData=function(){ 
            console.log("加载数据中...");
        }
    }]);
    myModule.controller('MyCtrl2', ['$scope', function($scope){ 
        $scope.loadData2=function(){ 
            console.log("加载数据中...22222");
        }
    }]);
    myModule.directive("loader", function() { 
        return {
            restrict:"AE",
            link:function(scope,element,attrs){ 
                element.bind('mouseenter', function(event) { 
                    //scope.loadData();
                    // scope.$apply("loadData()");
                    // 注意这里的坑，howToLoad会被转换成小写的howtoload
                    scope.$apply(attrs.howtoload);
                });
            }
        } 
    });

Directive&Controller.html

<!doctype html>
    <html ng-app="MyModule">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <div ng-controller="MyCtrl">
                <loader howToLoad="loadData()">滑动加载</loader>
            </div>
            <div ng-controller="MyCtrl2">
                <loader howToLoad="loadData2()">滑动加载</loader>
            </div>
        </body>
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="Directive&Controller.js"></script>
    </html>

二、指令间的交互  
以下示例：四种能力越来越强的超人  
Directive&Directive.js

var myModule = angular.module("MyModule", []);
    myModule.directive("superman", function() { 
        return {
            scope: {},
            restrict: 'AE',
            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");
                };
                this.addFart = function() { 
                    $scope.abilities.push("fart");
                };
            },
            link: function(scope, element, attrs) { 
                element.addClass('btn btn-primary');
                element.bind("mouseenter", function() { 
                    console.log(scope.abilities);
                });
            }
        }
    });
    myModule.directive("strength", function() { 
        return {
            require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) { 
                supermanCtrl.addStrength();
            }
        }
    });
    myModule.directive("speed", function() { 
        return {
            require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) { 
                supermanCtrl.addSpeed();
            }
        }
    });
    myModule.directive("light", function() { 
        return {
            require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) { 
                supermanCtrl.addLight();
            }
        }
    });
    myModule.directive('fart',  function(){ 
        return {
             require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) { 
                supermanCtrl.addFart();
            }
        };
    });

Directive&Directive.html  
controller：中写你想要暴露给外部的方法  
link：绑定事件、数据  
D

<!doctype html>
    <html ng-app="MyModule">
    
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="Directive&Directive.js"></script>
    </head>
    
    <body>
        <div class="row">
            <div class="col-md-3">
                <superman strength>动感超人---力量</superman>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <superman strength speed>动感超人2---力量+敏捷</superman>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <superman strength speed light>动感超人3---力量+敏捷+发光</superman>
            </div>
        </div>
            <div class="row">
            <div class="col-md-4">
                <superman strength speed light fart>动感超人3---力量+敏捷+发光+放屁</superman>
            </div>
        </div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue- 指令v-if 与指令v-show的区别

*区别1：** **v-if ：可以根据表达式的值在DOM中生成或移除一个元素。** **v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋...

快来打我*/ 2024年04月20日 11:08/ 0 赞/ 6 阅读

相关 Vue---内置指令、自定义指令（详细）、全局指令与局部指令

目录一、v-on 二、v-bind、v-model 三、v-if、v-else、v-show、v-for 四、v-text、v-big 五、v-html 六、v-

一时失言乱红尘/ 2024年04月07日 12:56/ 0 赞/ 18 阅读

相关 Dockerfile指令与实战

Dockerfile指令与实战 1、Dockerfile介绍 2、Dockerfile 构建过程 3、DockerFile指令

川长思鸟来/ 2022年10月27日 13:44/ 0 赞/ 122 阅读

相关指令scope与controller中$scope交互的几种方式

你想修改controller的$scope。首先你自己定义的指令就是用的controller中的scope。它没有继承或者独立出来一个scope。所以你修改你指令的scope下

亦凉/ 2022年08月23日 00:40/ 0 赞/ 131 阅读

相关 AngularJs-指令和控制器交互

1，指令和控制器的交互 <!DOCTYPE html> <html ng-app="MyController"> <head> <me

比眉伴天荒/ 2022年08月22日 15:35/ 0 赞/ 138 阅读

相关指令与控制器交互，指令与指令交互

慕课网《AngularJS实战》–指令3笔记，点击打开链接一、不同指令对应不同控制器方法（指令的复用） Directive&Controller.js va

我会带着你远行/ 2022年08月20日 12:24/ 0 赞/ 144 阅读

相关机器语言与指令

机器语言与指令每种CPU，都有自己的指令系统。这个指令系统，就是该CPU的机器语言。机器语言是一组有0和1组成的指令码，这些指令码是CPU制造厂商规定出来的，所以不同型号

缺乏、安全感/ 2022年08月07日 11:40/ 0 赞/ 85 阅读

相关 AngularJs-指令和控制器交互

[AngularJs-指令和控制器交互][AngularJs-] 前言：　　前段时间我们学习了angular的指令，他通过ECMA的方式创建元素，可以让我

超、凢脫俗/ 2022年06月05日 01:07/ 0 赞/ 132 阅读

相关 include编译指令与include动作指令区别浅谈

首先明确的是jsp页面是不可以直接被访问的，jsp被首次访问时会被编译成相应的servlet(“pageName\_jsp.java”文件)，然后编译执行有servlet生成相

柔光的暖阳◎/ 2022年04月24日 02:54/ 0 赞/ 185 阅读

相关 B跳转指令与ldr指令几点区别

B跳转指令是代码位置无关的，经过汇编后会替换为当前PC值加（减）一个修正值，不管这条指令是在哪一个地址执行，都能跳转到指定的位置。 B只能在当前PC的32M范围内跳

小鱼儿/ 2021年07月26日 20:37/ 0 赞/ 303 阅读