AngularJS中Directive傳function,並呼叫
阿新 • • 發佈:2019-01-29
在Angularjs中,指令是個好東西,可以極大的提高程式碼的重用性,也可以使各個模組之間解耦,提高程式碼的可維護性。但是在實際開發中,僅僅用它來傳遞值是遠遠不夠的,傳遞方法在很多情況下比傳遞值更加有效,下面我來介紹下如何往directiive中傳遞方法。
收先我們定義一個指令,用來執行controller中的一個方法
var app = angular.module('App'); app .directive("myDirective", [MyDirective]); function MyDirective() { return { restrict: 'E'
指令的模板頁面myDirective.view.html。注意:呼叫的時候是重點,要傳入一個物件,key為傳入方法的變數名稱,value是真實值
<div>傳入的msg為{{myDirectiveCtrl.msg}}</div> <button ng-click="myDirectiveCtrl.func({msg:myDirectiveCtrl.msg})">點選觸發傳入的方法</button>
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); } }
Controlle的頁面,注意,傳入回撥方法的引數(即”msg”),就是指令呼叫該方法,傳入引數的key
<div ng-controller="MyController as myController"> <my-directive msg="myController.msg" func="myController.callback(msg)"></my-directive> </div>