Question

我的事件和听众的angularjs应用程序存在问题。

我的应用程序有一个index.html文件，如下所示：

<body ng-app="ua.myApp">
    <!-- Navigation bar -->
    <ng-include src="'app/common/navbar/navbar.tpl.html'"></ng-include>
    <ng-view></ng-view>

    <script type="text/javascript" src="app/common/navbar/navbar.js"></script>
    <script type="text/javascript" src="app/part1/part1.js"></script>

</body>

在导航栏控制器中，我有一个监听器：

console.log('Setup event listner - navBar: update');
$scope.$on('navBar: update', function() {
    if (uaContext.loginStatus.get() == true) {
        $scope.setLoggedInBar();
    } else {
        $scope.setLoggedOutBar();
    }
});

在part1应用程序中，我播放了一个事件：

function ($scope, $rootScope, $routeParams, uaContext) {
    console.log('Send event listner - navBar: update');
    $scope.$on('$routeChangeSuccess', function () {
        uaContext.productId.set($routeParams.productId);
        uaContext.appName.set('part 1');
        $rootScope.$broadcast('navBar: update');
    });
}

myApp中的依赖项按以下顺序排列：

var myApp = angular.module('ua.myApp', [
    'ua.NavBar',
    'ua.Part1']);

工作正常。控制台日志：

Setup event listner - navBar: update (nav_bar.js)
Send event listner - navBar: update (part1.js)

问题是，有时事件是由第1部分应用程序在导航栏中的监听器运行之前发送的。所以我们得到了这种情况：

Send event listner - navBar: update (part1.js)
Setup event listner - navBar: update (nav_bar.js)

因此导航栏不会更新。

你知道如何解决这个问题吗？也许我可以在 routeChangeSuccess 之外的其他事件中发出事件，但我没有找到有关事件的文档。

谢谢

Answer 1

您可以在$scope中收听适用于ng-include设置位置的$includeContentLoaded事件。

另一个解决方案，而不是依赖于时间事件，是create a service，可以注入两个控制器，可以用来共享两者之间的导航状态。这样，即使在实例化导航栏控制器之前触发了事件，导航栏控制器也可以从共享服务中读取相应的状态。

Angularjs事件和异步模块加载

1 个答案: