Как реализовать несколько контроллеров ng с http-вызовами в AngularJS?

Question

В приложении/на странице у меня есть несколько мест, где данные должны быть загружены асинхронно. Например: a DIV с изображениями и еще один с катетерами (для навигаторов). Я реализовать это следующим образом:

app.js

(function() { 
    var app = angular.module('portfolio', []); 
    app.controller('ProjectsListController', ['$http', function($http) { 
     var projectsList = this; 
     projectsList.projectsListData = []; 
     $http.get(config['api_server_url'] + '/projects').success(function(data) { 
      projectsList.projectsListData = data; 
     }); 
    }]); 
    app.controller('NaviCategoriesController', ['$http', function($http) { 
     var categoriesList = this; 
     categoriesList.categoriesListData = []; 
     $http.get(config['api_server_url'] + '/categories').success(function(data) { 
      categoriesList.categoriesListData = data; 
     }); 
    }]); 
})(); 

list.phtml

<!-- projects --> 
<div id="projects" ng-app="portfolio"> 
    <div id="projectsList" ng-controller="ProjectsListController as projectsList"> 
     <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects"> 
      <div class="project-image"> 
       <img 
        ng-src="{{projectItem._embedded.images[0].src}}" 
        title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
        alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
       /> 
      </div> 
     </div> 
    </div> 
</div> 

navi-categories .phtml

<!-- navi-categories --> 
<div id="navi-categories" ng-app="portfolio"> 
    <ul id="categoriesList" ng-controller="NaviCategoriesController as categoriesList"> 
     <li class="categoryItem" ng-repeat="categoryItem in categoriesList.categoriesListData._embedded.categories"> 
      <a href="/categories/{{categoryItem.tech_name}}" title="{{categoryItem.title}}">{{categoryItem.short_name}}</a> 
     </li> 
    </ul> 
</div> 

Каждый из этих двух блоков работает нормально. Но я не могу использовать оба одновременно. Это означает: категории отображаются только в том случае, когда список проектов/изображений закомментирован (в HTML) - когда я активирую список, HTTP-запрос категорий больше не отправляется.

Что я делаю неправильно? Как это реализовать правильно?

Answer 1

Ну ... проблема в том, что у них обоих есть ng-app="portfolio". Вы должны обернуть оба компонента в одном DIV с атрибутом ng-app="portfolio":

<div id="app" ng-app="portfolio"> 
    <div id="projects"> 
     <div id="projectsList" ng-controller="ProjectsListController as projectsList"> 
      <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects"> 
       <div class="project-image"> 
        <img 
         ng-src="{{projectItem._embedded.images[0].src}}" 
         title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
         alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
        /> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id="navi-categories"> 
     <ul id="categoriesList" ng-controller="NaviCategoriesController as categoriesList"> 
      <li class="categoryItem" ng-repeat="categoryItem in categoriesList.categoriesListData._embedded.categories"> 
       <a href="/categories/{{categoryItem.tech_name}}" title="{{categoryItem.title}}">{{categoryItem.short_name}}</a> 
      </li> 
     </ul> 
    </div> 
</div>