使用独立的 AngularJS 控制器修复竞争条件

Fix race condition with independent AngularJS controller

本文关键字：竞争 条件 控制器 AngularJS 独立      更新时间：2023-09-26

在我的 Angular 应用程序中，我有一个根据路线变化的主视图，然后是一个无论如何都会显示的侧边栏。我的 HTML 看起来像这样：

<div id="container">
    <div id="sidebar" ng-controller="SidebarCtrl">(sidebar code)</div>
    <div ng-view id="content">Loading...</div>
</div>

javascript按以下顺序加载：

  1. 供应商.js（棱角等）
  2. 应用程序.js（我的应用程序）

侧边栏 Ctrl 在 App.js 中定义。然而，当 Angular 加载时，它会看到 ng-controller 指令并尝试立即将其分配给侧边栏，导致"参数 SidebarCtrl 不是函数"错误，除非缓存了 app.js。我正在考虑将侧边栏放在一个单独的文件中并在 Vendor.js 之前加载它，但侧边栏依赖于 App 中定义的一些服务.js（即我的自定义身份验证服务）：

MyApp.controller('SidebarCtrl', 
['$scope', '$location', 'auth', function($scope, $location, auth) {
    (...)
}])

所以无论哪种方式，我都不知所措。

我相信有更好的方法来设置它...有什么想法吗？我是否可以将SidebarCtrl定义为简单函数，但仍可以访问auth服务？

谢谢

您可以在

应用加载时动态地将 ng-controller 属性添加到sidebar：

var $self = angular.element('.sidebar');
$self.attr('ng-controller', window.USER_LOGGED_IN ? 'sidebarCtrl' : 'noUserCtrl');
angular.bootstrap(angular.element('body'));

当要使用的控制器取决于应用程序状态时，此方法很有用。在您的情况下，angular.bootstrap应该可以解决问题。

源

相关文章：