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

Question

I'm having a problem with my ng-controllers when they are more of one in the same page. For example, I have one controller on the page header, one on another section of the same page, and one in the page content, but all of them should edit their part and the content part, with different aliases

This is my HTML code:

Page header ( alias "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>

This is the second section ( alias "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>

And this is the page content ( alias "diarioEdit" )

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

And, finally, this is my JS Code:

(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);
    };

}]);

})();

I'm quite a newbie in Angular, but, searching here on StackOverflow I've read about using services to share data between controllers. It actually works by using service's methods, but the DOM doesn't get edited as I expected, even if data is stored correctly inside controllers.

What am I missing?

Answer 1

You don't need to instantiate your controller 3 times.

Just create a container div that controls the rest of your page:

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

Your page won't need a service to share data since everything is already in one scope.

If you really want to make blocks of elements that share data you want to look at angular components.