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()"); }) } } });
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处理指令内部事务