Question

我试图在Ruby on Rails和Angular应用程序上使用嵌套视图时得到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>

应用程序/视图/布局/ application.html.erb

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

正在发生的事情是国家＆＃39;家庭＆＃39;出现，当我点击链接时，URL发生了变化，但没有其他任何事情发生。我得到的消息是Angular被加载了不止一次。

已编辑：搞定了。应用程序的另一部分中的<%= yield %>冲突与Angular部分无关。

Answer 1

当您定义孩子的状态时，您需要将您的网址更改为/home，因为他们是home州的孩子，该网址是从父状态继承的。

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

Answer 2

你不应该像你一样在模板中启动你的应用程序。

将ng-app添加到您的html＆＃39; body并将其从模板中删除（实际上您的模板不能承载正文）

使用嵌套状态时，AngularJS加载多次

2 个答案: