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>

这两个块中的每一个都可以正常工作。但我不能同时使用两者。这意味着：只有当项目/图像列表被注释掉时（在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控制器？

1 个答案: