1

アプリ/ページには、データを非同期にロードする必要がある場所がいくつかあります。例:DIV画像付きの a と、カテゴリ付きの別の (ナビ用)。私は次のように実装します：

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>

これら 2 つのブロックはすべて正常に動作します。しかし、両方を同時に使用することはできません。つまり、プロジェクト/画像リストが（HTMLで）コメントアウトされている場合にのみ、カテゴリが表示されます。リストをアクティブにすると、カテゴリのHTTPリクエストは送信されなくなります。

私は何を間違っていますか？これを正しく実装するには？

4

1 に答える 1

3

うーん...問題は、両方ともng-app="portfolio". ng-app="portfolio"次の属性を使用して、両方のコンポーネントを 1 つの 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>
于 2015-12-26T13:53:12.010 に答える