如何在 AngularJS 中通过 http 调用实现多个 ng 控制器？

Question

在应用程序/页面上，我有几个地方应该异步加载数据。例如：一个 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>

这两个块中的每一个都可以正常工作。但我不能同时使用两者。这意味着：只有当 projects/images 列表被注释掉（在 HTML 中）时，类别才会显示——当我激活列表时，类别的 HTTP 请求不再发送。

我做错了什么？如何正确实施？

Answer 1

嗯...问题是他们都有ng-app="portfolio"。您应该使用 ng-app="portfolio" 属性将两个组件包装在一个 div 中：

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

如何在 AngularJS 中通过 http 调用实现多个 ng 控制器？

How to implement multiple ng controllers with http calls in AngularJS?

javascript

http

xmlhttprequest

angularjs

ng-controller