![](/img/trans.png)
[英]How to call function in parent controller from the child controller in angularjs
[英]AngularJS - Run function of child controller from parent controller
我已經讀過很多問題,但是仍然找不到足夠干凈且可重用的解決方案。
我嘗試過並且不想使用的內容:
簡單的例子
我已經建立了簡化的方案來提出這個問題。
在頁面上有顯示分鍾和秒的TimerComponent
。 它具有控制器TimerController
來更改其狀態: start()
和stop()
。 在示例中,有兩個,它們都呈現不同的值。
計時器模板不包含用於操作它的按鈕- 這是有意的 。 我想從其他控制器啟動和停止計時器。
親子溝通 。 我可以傳遞將每秒運行的value
和函數回調onTick()
。
親子溝通 :如何從父組件運行start()或stop()函數?
timer.component.js
(function() {
'use strict';
TimerController.$inject = ['$interval']
function TimerController($interval) {
var ctrl = this;
var interval = undefined;
ctrl.start = start;
ctrl.stop = stop;
ctrl.minutes = minutes;
ctrl.seconds = seconds;
function minutes() {
return Math.floor(ctrl.value / 60);
}
function seconds() {
return (ctrl.value % 60);
}
function start() {
interval = $interval(function() {
ctrl.value--;
ctrl.onTick({ 'value': ctrl.value });
}, 1000);
}
function stop() {
$interval.cancel(interval);
}
}
angular.module('app').component('timer', {
bindings: {
value: '<',
onTick: '&'
},
templateUrl: 'timer.html',
controller: TimerController
});
})();
timer.html
<span ng-bind="$ctrl.minutes() + ':' + $ctrl.seconds()"></span>
app.html
<body ng-app="app" ng-controller="MainController as vm">
<p>First timer: </p>
<timer value="360" on-tick="vm.firstTimerTick(value)"></timer>
<p>Second timer: </p>
<timer value="120" on-tick="vm.secondTimerTick(value)"></timer>
<p>
<span ng-click="vm.startFirstTimer()">Start first timer</span>
</p>
</body>
main.controller.js
(function() {
'use strict';
angular.module('app').controller('MainController', MainController);
function MainController() {
var ctrl = this;
ctrl.firstTimerTick = firstTimerTick;
ctrl.secondTimerTick = secondTimerTick;
ctrl.startFirstTimer = startFirstTimer;
function firstTimerTick(value) {
console.log('FirstTimer: ' + value);
}
function secondTimerTick(value) {
console.log('SecondTimer: ' + value);
}
function startFirstTimer() {
/* How to run start() function of TimerController here? */
}
function stopFirstTimer() {
/* How to run start() function of TimerController here? */
}
}
})();
一種方法是使用新的ngRef指令 :
<timer ng-ref="vm.timerOne" value="360" on-tick="vm.firstTimerTick(value)">
</timer>
然后在控制器中使用它:
function startFirstTimer() {
/* How to run start() function of TimerController here? */
ctrl.timerOne.start();
}
ngRef指令是AngularJS V1.7.1的新增功能。
有關更多信息,請參見AngularJS ng-ref Directive API Reference 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.