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

Question

我在object时遇到问题，因为他们在同一页面中更多。例如，我在页面标题上有一个控制器，在同一页面的另一个部分有一个控制器，在页面内容中有一个控制器，但是所有它们应该编辑它们的部分和内容部分，具有不同的别名

这是我的HTML代码：

页眉（别名“timelineIcons”）

ng-controllers

这是第二部分（别名“timelineControls”）

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

这是页面内容（别名“diarioEdit”）

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

最后，这是我的JS代码：

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

}）（）;

我是Angular中的新手，但是，在StackOverflow上搜索我已经阅读了有关使用(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); }; }]); 在services之间共享数据的信息。 它实际上是通过使用服务的方法来工作的，但是controllers没有按照我的预期进行编辑，即使数据在控制器中正确存储也是如此。

我错过了什么？

Answer 1

您无需将控制器实例化3次。

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

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

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

如果您确实想要制作共享数据的元素块，您想要查看angular components。