Question

我正在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.添加到身份验证摘要中，以使网址保持为/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>

Answer 1

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

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

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

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

来源：angular documentation

角度抽象状态不在页面重新加载：“应用程序已经使用此元素进行了自举”

1 个答案: