指令与控制器之间的交互

1、指令与控制器交互

<div ng-controller="MyCtrl">    <loader>滑动加载</loader></div>

angular.module("MyCtrl",[]).controller("myCtrl"，["$scope",function(){    $scope.loadData = function(){        console.log("数据加载中");    }}]).directive("loader",function(){    return {        restrict:"AE",        link:function(scope,element,attr){            element.bind("mouseenter",function(){                scope.loadData();                //scope.$apply("loadData()");            })        }    }});

$apply 方法传播 Model 的变化，用来刷新模型视图

2、指令与多个控制器进行交互

<div ng-controller="myCtrl">    <loader howToLoad="loadData()">滑动加载</loader></div><div ng-controller="myCtrl2">    <loader howToLoad="loadData2()">滑动加载</loader></div>

angular.module("MyCtrl",[]).controller("myCtrl"，["$scope",function(){    $scope.loadData = function(){        console.log("数据加载中");    }}]).controller("myCtrl2"，["$scope",function(){    $scope.loadData2 = function(){        console.log("数据加载中2");    }}]).directive("loader",function(){    return {        restrict:"AE",        link:function(scope,element,attr){            element.bind("mouseenter",function(){                scope.$apply(attr.howtoload);            })        }    }});

注意，html中使用驼峰命名的时候，在directive中要使用小写

3、指令与指令之间进行交互

<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>

var myModule = angular.module("MyModule", []);myModule.directive("superman", function() {    return {        scope: {},//创建独立作用域        restrict: 'AE',        //指令内部控制器，暴露一组public函数，给外部调用        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, 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();        }    }});

controller中写供外部调用的方法，link处理指令内部事务