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

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

本文关键字：实现 调用 控制器 ng http AngularJS      更新时间：2023-09-26

在应用程序中/页面上，我有几个地方，应该异步加载数据。 例如：一个带有图像的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请求不再被发送。

我做错了什么？如何正确实现这一点？

嗯...问题是他们都有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>
相关文章：