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

我会带着你远行 2022-08-20 12:24 312阅读 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 条评论，312人围观）

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

相关阅读

相关 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 赞/ 201 阅读

相关 angularjs指令之间的数据交互

指令可以通过独立作用域接收数据，使用=，如 app.directive('myDirective', function() { return {

小咪咪/ 2023年06月29日 13:57/ 0 赞/ 76 阅读

相关指令系统——指令格式

文章目录现代计算机的结构指令格式指令的定义指令格式零地址指令一地址指令

古城微笑少年丶/ 2023年01月21日 04:27/ 0 赞/ 165 阅读

相关 Dockerfile指令与实战

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

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

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

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

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

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

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

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

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

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

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

相关机器语言与指令

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

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

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

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

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

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

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

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