问题描述
我已经阅读了很多关于此的问题,但仍然找不到足够干净和可重复使用的解决方案.
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() 来访问子范围,
- 子组件中的$onChange
简单示例
我已经构建了简化的场景来呈现问题.
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
<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? */
}
}
})();
推荐答案
一种方法是使用新的 ngRef 指令:
One approach is to use the new ngRef directive:
<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 ng-ref 指令 API 参考.
For more information, see AngularJS ng-ref Directive API Reference.
这篇关于AngularJS - 从父控制器运行子控制器的功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!