AngularJS探秘（二）——angularJS中controller与directive双向通信

来源：互联网发布：特斯拉最高时速知乎编辑：程序博客网时间：2024/04/28 09:02

工作中要改写一个开源项目，项目用的是angular框架，其中一个很重要的部分封装成了指令，然后我新增了一个控制器，想要使用指令中定义的一些变量，本以为是一件简单的事情，没想到竟没有想象中那么顺利。

一次工作中的机会，需要用到angularJS中控制器调用指令中的方法，于是把angularJS控制器与指令的通讯深入研究了一下，记载在此。

首先我们来看一下怎么在directive中调用controller的方法：

Index.html：

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>Angular Directive Call Controller Function</title>  <script src="angular-1.3.0.js"></script></head><body ng-app="myApp">  <h1>Angular Directive Call Controller Function</h1>  <div ng-controller="myController">    <my-directive on-button-click="directiveButtonClicked()" />  </div>  <script src="script.js"></script></body></html>

Script.js：

var app = angular.module("myApp", []); app.controller("myController", function($scope) {  $scope.directiveButtonClicked = function() {    // Controller reacting to call initiated by directive    alert('Button was clicked in directive');  }}); app.directive("myDirective", function() {  return {    restrict: 'E',    template: '<button ng-click="buttonClicked();">Click Me</button>',    scope: {      onButtonClick: '&'    },    link: link  };   function link(scope, element, attrs, controller) {    scope.buttonClicked = function() {      // Button was clicked in the directive      // Invoke callback function on the controller      scope.onButtonClick();    }  }});

首先，在controller中，有一个directiveButtonClicked方法，这个方法在点击button的时候被调用，而这个button则是出现在directive中的。其实仔细看代码就知道，这个方法是通过属性传给了directive，所以这个通讯其实没有什么特别的。

但是在controller中调用directive的方法就没这么简单了。看代码：

Index.html：

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>Angular Controller Call Directive Function</title>  <script src="angular-1.3.0.js"></script></head><body ng-app="myApp">  <h1>Angular Controller Call Directive Function</h1>  <div ng-controller="myController">    <my-directive accessor="accessor" ></my-directive>    <button ng-click="callDirective();">Get Data</button>  </div>  <script src="script.js"></script></body></html>

Script.js：

var app = angular.module("myApp", []); app.controller("myController", function($scope) {  $scope.accessor = {};  $scope.callDirective = function() {    if($scope.accessor.getData) {      var data = $scope.accessor.getData();      alert('Data from directive: ' + JSON.stringify(data));    }  }}); app.directive("myDirective", function() {  return {    restrict: 'E',    template: 'Name: <input type="text" ng-model="name" /><br />Credit: <input type="text" ng-model="credit" /><br />',    scope: {      accessor: '='    },    link: link  };   function link(scope, element, attrs, controller) {    if(scope.accessor) {      scope.accessor.getData = function() {        return {          name: scope.name,          credit: scope.credit        }      }    }  }});

仔细看代码，其实在directive中有一个叫做accessor的属性，而它正是controller中的东西，相当于在directive中开了一个口子，然后把controller的一个东西注入进去了，这样，controller就能够调用directive中的任何东西了。

这两个例子相信在今后的工作中对我会有非常大的帮助。

什么时候开始都不晚，晚的是，你总是不敢开始。

转载请注明出处：http://www.channingbreeze.com/blog-10.html

0 0