指令与控制器交互，指令与指令交互-蒲公英云

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

慕课网《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>