在 HTML 的不同部分使用具有不同别名的相同 ng-controller

Question

我的 ng-controllers 有问题，因为它们在同一页面上有多个。例如，我在页眉上有一个控制器，在同一页的另一部分上有一个控制器，在页面内容中有一个控制器，但是 all 它们应该编辑它们的部分和内容部分, 有不同的别名

这是我的 HTML 代码：

页眉（别名"timelineIcons"）

<div class="settimanebar" ng-controller="timelineCtrl as timelineIcons">
<div class="main zerogrid">
    <div id="week-list-resp">
        <ul></ul>
    </div>
    <div id="week-list">
        <div class="week-list-container content-xlg">
            <div class="week-single" ng-repeat="ico in timelineIcons.wk_list" ng-click="timelineIcons.loadWeek($index + 1);">
                <img ng-show="{{timelineIcons.currentWeek == ($index + 1)}}" src="<?php echo IMG_PATH; ?>puntatore.png"/>
                <span ng-class="{'active':{{timelineIcons.currentWeek == ($index + 1)}}}">{{$index + 1}}</span>
            </div>
            <div class="week-button" ref="41">
                <a href="#" class="<?php echo $_showWeek == 41 ? '_bornactive' : '_born'; ?>">Nascita</a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div><!--end of #week-list -->
</div>

这是第二部分（别名"timelineControls"）

<div class="settimanaactive" ng-controller="timelineCtrl as timelineControls">
<div class="main zerogrid">
    <div id="settimana" class="<?php echo $_showWeek == 41 ? 'finetempo' : null; ?>">
        <div class="prev" ng-hide="current_week == 1 || current_week == 2">
            <a href="#" ng-click="timelineControls.prevWeek()">
                <i class="arrow arrow-left"></i>
            </a>
        </div>
        <p>{{current_week == 41 ? "Nascita" : "Settimana " +current_week}}</p>
        <span ng-show="current_week != 41">
            {{40 - current_week > 1 ? "mancano " + 40 - current_week : "manca una"}}
            {{40 - current_week == 1 ? " settimana" : " settimane"}}
        </span>
        <div class="next" ng-hide="current_week == 41">
            <a href="#" ng-click="timelineControls.nextWeek()">
                <i class="arrow arrow-right"></i>
            </a>
        </div>
    </div>
</div>

这是页面内容（别名"diarioEdit"）

<div class="wrapper diario" ng-controller="timelineCtrl as diarioEdit">
    <p>{{diarioEdit.wk_content.testo_top}}</p>
    // other page content
</div>

最后，这是我的 JS 代码：

(function () {
var app = angular.module('dgApp', []);

app.factory('retrieveWeeks', ['$http', function ($http) {

    var retrieveWeeks = this;

    this.currentWeek = null;

    this.weekList = [];

    for (var i = 1; i < 41; i++) {
        this.weekList.push(i);
    }

    this.getList = function () {
        return this.weekList;
    };

    this.setWeek = function (week_number) {
        retrieveWeeks.currentWeek = week_number;
    };

    this.getWeek = function (week_number) {

        return $http.get(php_data.ajax_url, {
            params: {
                action: "getweek",
                wid: week_number
            }
        });
    };

    return retrieveWeeks;

}]);

app.controller('timelineCtrl', ['retrieveWeeks', function (retrieveWeeks) {
    var timeline = this;

    var week_number = angular.element("week_number");
    timeline.currentWeek = week_number.val() ? week_number.val() : 1;

    timeline.wk_list = retrieveWeeks.getList();

    timeline.loadWeek = function (week_number) {
        retrieveWeeks.getWeek(week_number).success(function (result) {
            timeline.wk_content = result.contenuto;
            timeline.wk_post = result.post;
            timeline.wk_current = result;
            timeline.wk_selected = week_number;
            timeline.currentWeek = week_number;
            retrieveWeeks.setWeek(week_number);
        });
    };

    this.loadWeek(timeline.currentWeek);

    timeline.setWeek = function (index) {
        timeline.loadWeek(index);
    };

    timeline.nextWeek = function () {
        timeline.loadWeek(timeline.currentWeek + 1);
    };

    timeline.prevWeek = function () {
        timeline.loadWeek(timeline.currentWeek - 1);
    };

}]);

})();

我是 Angular 的新手，但是，在 Whosebug 上搜索时，我读到了有关使用 services 在 controllers 之间共享数据的信息。它实际上是通过使用服务的方法来工作的，但是 DOM 没有像我预期的那样被编辑，即使数据正确存储在控制器中也是如此。

我错过了什么？

Answer 1

您不需要实例化您的控制器 3 次。

只需创建一个容器 div 来控制页面的其余部分：

<div ng-controller="timeLineCtrl as ctrl">
    <header></header>
    <section></section>
    <div></div>
</div>

您的页面不需要共享数据的服务，因为所有内容都已在一个范围内。

如果您真的想要创建共享数据的元素块，请查看angular components。

在 HTML 的不同部分使用具有不同别名的相同 ng-controller

Use same ng-controller with different aliases in different parts of HTML

html

javascript

angularjs

angularjs-service

这是我的 HTML 代码：

页眉（别名"timelineIcons"）

这是第二部分（别名"timelineControls"）

这是页面内容（别名"diarioEdit"）