AngularJS-从父控制器运行子控制器的功能 [英] AngularJS - Run function of child controller from parent controller
问题描述
我已经读过很多问题，但是仍然找不到足够干净且可重复使用的解决方案.
I have read many questions on this but still can't find solution that will be clean and reusable enough.
我尝试过并且不想使用的东西
What I tried and don't want to use:
- 事件-$ emit和$ broadcast，
- DOM操作-例如angular.element('nameOfElement').scope()访问子级作用域，
- $ on更改子组件
简单示例
我已经构建了简化的方案来提出问题.
I've build simplified scenario of to present the problem.
页面上的TimerComponent显示分钟和秒.它具有控制器TimerController来更改其状态:start()和stop().例如，有两个，它们都呈现不同的值.
On page there is TimerComponent that shows minutes and seconds. It have controller TimerController to change its state: start() and stop(). In example there are two of them, both presenting different values.
计时器模板不包含用于对其进行操作的按钮-这是故意的.我想从其他控制器启动和停止计时器.
Timer template does not contain buttons to manipulate it - that is intentional. I want to start and stop the timer from other controller.
儿童与父母之间的交流.我可以传递value和函数回调onTick()，它们将每秒运行一次.
Child-To-Parent communication. I can pass value and function callback onTick() that will be run every second.
亲子交流: 如何从父组件运行start()或stop()函数?
Parent-To-Child communication: How could I run start() or stop() functions from parent component?
timer.component.js
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
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
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? */
}
}
})();
推荐答案
一种方法是使用新的
然后在控制器中使用它: Then use it in the controller: 有关更多信息，请参见 AngularJS ng-ref指令API参考. For more information, see AngularJS ng-ref Directive API Reference. 这篇关于AngularJS-从父控制器运行子控制器的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！function startFirstTimer() {
/* How to run start() function of TimerController here? */
ctrl.timerOne.start();
}
