AngularJSでDirectiveがfunctionを送信し、呼び出す
3878 ワード
Angularjsでは,命令は良いものであり,コードの再利用性を極めて高めることができ,各モジュール間をデカップリングし,コードのメンテナンス性を高めることができる.しかし,実際の開発では,それだけで値を伝達するだけでは十分ではなく,伝達方法が伝達値よりも有効である場合が多いので,directiveへの伝達方法を紹介する.まず、controllerのメソッド を実行するための命令を定義する.命令のテンプレートページmyDirective.view.html.注意:呼び出すときはポイントです.オブジェクトを渡すにはkeyがメソッドの変数名で、valueは真の値 です. Controllerで任意に定義する方法 Controlのページでは、コールバックメソッドに入力パラメータ(すなわち「msg」)は、メソッドを呼び出すように命令するものであり、パラメータに入力key
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
}<div> msg {{myDirectiveCtrl.msg}}div>
<button ng-click="myDirectiveCtrl.func({msg:myDirectiveCtrl.msg})"> button> 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);
}
} <div ng-controller="MyController as myController">
<my-directive msg="myController.msg" func="myController.callback(msg)">my-directive>
div>