angularJS中controller与directive双向通信

一次工作中的机会，需要用到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中的任何东西了。

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

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

posted on 2016-07-28 10:39  子墨'  阅读(1171)  评论(0)    收藏  举报

导航