1. 程式人生 > >AngularJS中Directive傳function,並呼叫

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>