AngularJS中Directive传function，并调用

在Angularjs中，指令是个好东西，可以极大的提高代码的重用性，也可以使各个模块之间解耦，提高代码的可维护性。但是在实际开发中，仅仅用它来传递值是远远不够的，传递方法在很多情况下比传递值更加有效，下面我来介绍下如何往directiive中传递方法。

1. 收先我们定义一个指令，用来执行controller中的一个方法

       var app = angular.module('App');
       app .directive("myDirective", [MyDirective]);
   
       function MyDirective() {
           return {
               restrict: 'E',
               bindToController: { // 将参数传入Controller的this变量中
                   msg: "=",//接收从controller中传入的参数
                   func: "&",//传入的方法，需要传入参数msg
               },
               controller: [MyDirectiveCtrl], //指令中controller的名称
               controllerAs: 'myDirectiveCtrl', //别名
               templateUrl: "myDirective.view.html"
           }
       }
   
       function MyDirectiveCtrl(){//指令控制Controller啥都不用干
   
       }

2. 指令的模板页面myDirective.view.html。注意：调用的时候是重点，要传入一个对象，key为传入方法的变量名称，value是真实值

   <div>传入的msg为{{myDirectiveCtrl.msg}}div>
   <button ng-click="myDirectiveCtrl.func({msg:myDirectiveCtrl.msg})">点击触发传入的方法button>

3. Controller中随便定义一个方法

       var app = angular.module('App');
       app .controller("MyController", [MyController]);
   
       function MyController(){
           var vm = this;
           vm.msg = "传递到directive中的msg";
           vm.callback = callback;
           function callback(msg){
               alert(msg);
           }
       }

4. Controlle的页面,注意，传入回调方法的参数（即”msg”），就是指令调用该方法，传入参数的key

       <div ng-controller="MyController as myController">
       <my-directive msg="myController.msg" func="myController.callback(msg)">my-directive>
       div>