角度抽象状态在页面重新加载时不起作用："App already bootstrapped with this element"

我正在 meanjs.org 应用程序之上构建我的应用程序。

我需要在每个页面的顶部有一个主控制器，所以我更新了一些状态，如下所示：

    $stateProvider
      .state('app', {
        abstract: true,
        templateUrl: 'modules/core/client/views/core.client.view.html',
        controller: 'MainController',
        controllerAs: 'mc'
      })
      .state('app.home', {
        url: '/',
        templateUrl: '/modules/core/client/views/home.client.view.html',
        controller: 'HomeController',
        controllerAs: 'vm'
      })
      .etc...

一切都按预期工作，直到我开始在身份验证页面上工作。

我所做的只是将主抽象app.添加到身份验证摘要中，以保持 url 像这样/authentication/sign-in：

     .state('app.authentication', {
        abstract: true,
        url: '/authentication',
        templateUrl: '/modules/users/client/views/authentication/authentication.client.view.html',
        controller: 'AuthenticationController',
        controllerAs: 'vm'
      })
      .state('app.authentication.signup', {
        url: '/sign-up',
        templateUrl: '/modules/users/client/views/authentication/signup.client.view.html',
        controller: 'AuthenticationController',
        controllerAs: 'vm',
        data: {
          pageTitle: 'Signup'
        }
      })
      .state('app.authentication.signin', {
        url: '/sign-in?err',
        templateUrl: '/modules/users/client/views/authentication/signin.client.view.html',
        controller: 'AuthenticationController',
        controllerAs: 'vm',
        data: {
          pageTitle: 'Signin'
        }
      });

因此，当我通过应用程序单击sign in链接时，它会正确加载主摘要页面和身份验证摘要页面，并且它也由登录页面填充。

但是当我在登录页面中并尝试重新加载页面时，它会触发错误：

WARNING: Tried to load angular more than once.
Uncaught Error: [ng:btstrpd] App already bootstrapped with this element 'document'

我希望我的应用程序在每个状态下都能重新加载，并且看起来应该有的样子。

我在这里做错了什么？

这也是我的 HTML：

core.client.view.html：

<header ng-include="'/modules/core/client/views/partials/header.client.partial.view.html'" ng-controller="HeaderController" id="header" class="topnavbar-wrapper"></header>
<div data-ui-view autoscroll="false" id="wrapper"></div>
<footer ng-include="'/modules/core/client/views/partials/footer.client.partial.view.html'"></footer>

authentication.client.view.html（默认）：

<section class="row">
  <h3 class="col-md-12 text-center">Sign in using your social accounts</h3>
  <div class="col-md-12 text-center">
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')"  ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
  </div>
  <div ui-view></div>
</section>

当您意外使用ng-app和angular.bootstrap来引导应用程序时，通常会发生这种情况。

<html>
...
  <body ng-app="myApp">
    <script>
      angular.bootstrap(document.body, ['myApp']);
    </script>
  </body>
</html>

请注意，出于引导目的，<html> 元素与 document 相同，因此以下内容也会引发错误。

<html>
...
<script>
  angular.bootstrap(document, ['myApp']);
</script>
</html>

如果您多次意外加载AngularJS本身，也可能会出现此错误。

<html ng-app>
  <head>
    <script src="angular.js"></script>
    ...
  </head>
  <body>
    ...
    <script src="angular.js"></script>
  </body>
</html>

来源：角度文档

相关内容

最新更新

热门标签：