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

最新推荐文章于 2022-09-20 18:29:32 发布

Kou_Hi

最新推荐文章于 2022-09-20 18:29:32 发布

阅读量1.1k

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u010552788/article/details/50757367

版权

angularjs 专栏收录该内容

11 篇文章 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>

Kou_Hi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
指令与控制器交互，指令与指令交互

慕课网《AngularJS实战》–指令3笔记，点击打开链接一、不同指令对应不同控制器方法（指令的复用）Directive&Controller.jsvar myModule = angular.module("MyModule", []);myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.loadData=f
复制链接

扫一扫