javascript - Use same ng-controller with different aliases in different parts of HTML -
i'm having problem ng-controllers when more of 1 in same page. example, have 1 controller on page header, 1 on section of same page, , 1 in page content, all of them should edit part , content part, different aliases
this html code:
page header ( alias "timelineicons")
<div class="settimanebar" ng-controller="timelinectrl 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 second section ( alias "timelinecontrols" )
<div class="settimanaactive" ng-controller="timelinectrl 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 page content ( alias "diarioedit" )
<div class="wrapper diario" ng-controller="timelinectrl diarioedit"> <p>{{diarioedit.wk_content.testo_top}}</p> // other page content </div> and, finally, js code:
(function () { var app = angular.module('dgapp', []); app.factory('retrieveweeks', ['$http', function ($http) { var retrieveweeks = this; this.currentweek = null; this.weeklist = []; (var = 1; < 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 newbie in angular, but, searching here on stackoverflow i've read using services share data between controllers. works using service's methods, dom doesn't edited expected, if data stored correctly inside controllers.
what missing?
you don't need instantiate controller 3 times.
just create container div controls rest of page:
<div ng-controller="timelinectrl ctrl"> <header></header> <section></section> <div></div> </div> your page won't need service share data since in 1 scope.
if really want make blocks of elements share data want @ angular components.
Comments
Post a Comment