AngularJS 使用嵌套状态时加载不止一次

Question

当我尝试在 Rails 和 Angular 应用程序的 Ruby 上使用嵌套视图时，我得到了一个 WARNING: Tried to load angular more than once.。我正在使用 ui-router 和 angular-rails-templates.

Angular 配置和控制器：

var app = angular.module('app', ['ui.router', 'templates']);

app.factory('categories', ['$http', function($http) {
    var o = {
        categories: []
    };
    o.get = function (id) {
    return $http.get('/categories/' + id + '.json').then(function (res) {
      return res.data;
    });
  };
  return o;
}]);

app.config([
    '$stateProvider', 
    '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'home/_home.html',
        controller: 'MainCtrl',
    });
    $stateProvider
    .state('home.categories', {
        url: '/categories/:categoryId',
        templateUrl: 'categories/_categories.html',
        controller: 'CategoriesCtrl',
        resolve: {
            category: ['$stateParams', 'categories', function($stateParams, categories) {
                return categories.get($stateParams.categoryId);
            }]
        }
    });
    $urlRouterProvider.otherwise('/home');
  }]);


app.controller('MainCtrl', function ($state) {
  $state.transitionTo('home.categories');
});

app.controller('CategoriesCtrl', [
    '$scope',
    'categories',
    'category',
    function($scope, categories, category) {
        $scope.posts = category.posts;
    }
]);

和模板：

_home.html（*edited: 从此模板中删除了 body 和 ng-app，遵循@apneadiving 建议，并使用了正确的路径，如@Pankaj 所指出的现在，视图已正确呈现，但 'loading more than once' 仍然存在）

  <a href="#/home/categories/1">Category One</a>
  <a href="#/home/categories/2">Category Two</a>
  <ui-view></ui-view>

_categories.html

<ul ng-repeat="post in posts">
    <li>{{post.title}}</li>
</ul>

app/views/layouts/application.html.erb

<!--<rails head>-->
<body ng-app="app">
    <ui-view></ui-view>
</body>

发生的事情是状态 'home' 出现，当我单击链接时，URL 发生变化，但没有其他任何反应。我收到 Angular 被多次加载的消息。

已编辑：成功了。这是应用程序另一部分的 <%= yield %> 冲突，应该与 Angular 部分无关。

Answer 1

由于您定义了子状态，因此您需要将 URL 更改为 /home，因为它们是 home 状态的子状态，URL 得到从父状态继承。

<a href="#/home/categories/1">Category One</a>
<a href="#/home/categories/2">Category Two</a>

Answer 2

您不应该像现在这样在模板中启动您的应用程序。

将 ng-app 添加到您的 html 的 body 并将其从模板中删除（实际上您的模板也不应包含正文）

AngularJS 使用嵌套状态时加载不止一次

AngularJS loading more than once when using nested states

routing

ruby-on-rails

angularjs

angularjs-routing

angular-ui-router