在我的 AngularJS 应用程序中,我有一个管理用户输入的 Controller (input controller) 并广播页面的每一个重大变化 content controller (实际上是内容部分由多个 Controller 管理,但让我们保持简单)。
输入 Controller 提供从数据库检索的各种元素之间的选择,在页面初始化时,我必须加载输入 Controller 数据并为内容 Controller 提供默认选择,以便它可以在页面加载时显示重要数据.
现在我在输入 Controller 初始化时拍摄一个事件 ($rootScope.$broadcast('inputSelected', inputData);
) 但显然 angular 还没有初始化所以内容 Controller 没有' t 捕获事件并且不呈现实际内容页面。
我做了一个JSFiddle演示行为:
初始化时,第一个 Controller 使用初始数据向第二个 Controller 发送事件:
myApp.controller('FirstController', function ($scope, $rootScope) {
$scope.myInput = 'Initial data';
$scope.broadcast = function() {
console.log ('broadcasting: ' + $scope.myInput);
$rootScope.$broadcast('myEvent', $scope.myInput);
};
$scope.broadcast();
});
第二个 Controller 正在监听“myEvent”:
myApp.controller('SecondController', function ($scope) {
$scope.$on('myEvent', function (event, args) {
console.log ('myEvent catched - Data: ' + args);
$scope.data = args;
});
});
当页面加载时,第一个事件没有被第二个 Controller 捕获并且初始数据没有传递,然后如果你按下按钮 BROADCAST(angular 被初始化),一切正常。
那么最后一个问题:初始化时在 Controller 之间传递数据的最佳方法是什么?有没有办法确保在广播第一个事件之前完全初始化 Angular?
最佳答案
包装 $scope.broadcast();在 $scope.$evalAsync 中调用对我有用:
myApp.controller('FirstController', function ($scope, $rootScope) {
$scope.myInput = 'Initial data';
$scope.broadcast = function() {
console.log ('broadcasting: ' + $scope.myInput);
$rootScope.$broadcast('myEvent', $scope.myInput);
};
$scope.$evalAsync( function() {
$scope.broadcast();
});
});
另见:https://stackoverflow.com/a/23589271/1288109
请参阅有关 $evalAsync 的文档:https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync
关于javascript - AngularJS:如何在初始化期间在 Controller 之间传递数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37132919/