Events Angularjs事件和异步模块加载_Events_Angularjs

Events Angularjs事件和异步模块加载

events angularjs

Events Angularjs事件和异步模块加载,events,angularjs,Events,Angularjs,我的angularjs应用程序在事件和侦听器方面有问题我的应用程序有一个index.html文件，如下所示： <body ng-app="ua.myApp">  <ng-include src="'app/common/navbar/navbar.tpl.html'"></ng-include> <ng-view></ng-view> <

我的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>

在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)

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

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

因此导航栏不会更新

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

谢谢

您可以在

$scope

中收听适用于

ng include

设置位置的事件

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

事实上，由于uaContext服务，数据已经共享。一个解决方案是在这个服务的变量上添加一个手表，但是我必须在服务中使用几个变量。所以我必须对服务中要求的所有元素进行监视？这是最好的方式吗？你已经得到了服务，干得好！是的，我认为如果您有不同的视图需要响应该服务的变量（状态），那么将它们公开为可监视的服务属性是一种合理的方式。好的，但是监视一个服务中的多个变量是否有效？我有10个变量要看。一种解决方法是在此服务中添加一个变量

modified

，并在每次修改服务中的变量后对其进行修改。然后我就可以观察这个变量了。另一种解决方法是使用事件。但是，如果在事件广播后加载了附带的导航条，则我无法捕获事件。

includeContentLoaded

事件无法解决此问题，因为我必须将事件从ng view Part1发送到包含的组件导航栏是的，

includeContentLoaded

事件将是一个您可以发送事件的地方，以确保您的导航栏已加载且其处理程序将收到它。如果您担心手表的效率，您不能在导航控制器中观看，而只需在启动时检查导航服务状态，同时仍在监听这些事件。通过这种方式，导航栏在启动时从服务获取正确的状态（即使它错过了事件），但仍将侦听事件以保持与状态同步（不使用手表）。顺便说一句。。。就整体效率而言。。。观察10个变量应该不是问题。请参阅Misko关于该主题的开创性文章：模板中的所有数据绑定表达式本质上也是手表，因此angular必须能够有效地处理10个以上的表达式

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