2

我的 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();
    }
});

在第 1 部分应用程序中，我广播了一个事件：

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)

问题是有时在导航栏中的侦听器运行之前由 part1 应用程序发送事件。所以我们得到这样的情况：

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

因此导航栏不会更新。

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

谢谢

4

1 回答 1

1

您可以在适用于设置的位置监听$includeContentLoaded事件。$scopeng-include

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

于 2013-08-28T00:41:22.240 回答