javascript - Angularjs nested controller called just one time -
i'm new in angularjs , have app, "projects", have local menu displayed on pages. index.html contains main navbar footer :
<body ng-app="ysi-app" ng-controller="maincontroller"> <div class="page-content"> <div class="row"> <div class="col-md-2"> <div class="sidebar content-box" style="display: block;"> <ul class="nav"> <!-- main menu --> <li ng-if="isauthenticated()"><a href="#/">{{name}}</a></li> <li class="current"><a href="index.html">dashboard</a></li> <li><a href="#/project">projects</a></li> </ul> </div> <div ng-if="isauthenticated() && displayprojectmenu == true" ng-include="'views/localmenu.html'" ng-controller="localmenucontroller"> </div> </div> <div ng-view></div> </div>
so have nested controller localmenucontroller local menu , main controller. project controller sets datas :
angular.module('projectctrl',[]).controller('projectcontroller',function($scope,$location, projectservice,$route, authenticationservice, $rootscope){ $scope.setprojectdatas = function(projectname, projectid){ projectservice.setname(projectname); $rootscope.projectid = projectid; };});
i set id of 1 project $rootscope testing (i have service better) , in localmenucontroller :
angular.module('localmenuctrl',[]).controller('localmenucontroller', function($scope, projectservice, $rootscope) { $scope.projectid = ''; $scope.projectid = $rootscope.projectid; });
i display projects in table , when clicked on 1 of it, function setprojectdatas(name,id) called. problem when clicked on 1 project, id of project correct , set when go previous , clicked on project, id old id of project clicked. datas not updating. googled problem found nothing on it.
think localmenucontroller called 1 time not after.
what doing wrong ?
thank you
update
i've created directive displays template it's still not updating partial view localmenu. localmenu directive :
angular.module('localmenuctrl',[]).controller('localmenucontroller', function($scope, projectservice, $rootscope) { console.log('-> localmenu controller'); }) .directive('localmenu', function($rootscope){ return { templateurl: '/ysi-dev/public/views/partials/localmenu.html', link: function(scope){ scope.projectid = $rootscope.projectid; } }; });
a part of index.html
<div ng-if="isauthenticated() && displayprojectmenu == true" ng-controller="localmenucontroller"> <div local-menu></div> </div>
partial view localmenu :
<div class="sidebar content-box" style="display: block;"> <ul class="nav"> <li><a href="#/project/{{projectid}}"><i class="glyphicon glyphicon-list-alt"></i> backlog</a></li> <li><a href="#/project/{{projectid}}/members"><i class="glyphicon glyphicon-user"></i> team </a></li> </ul> </div>
i'm trying projectid $rootscope , inject in <a href="#/project/{{projectid}}"
have troubles. what's way ?
first of all, try using directives instead of ng-controller. can encapsulate code , template unit. can try creating component. pass data directive/component , angular take care of updating template , running whatever needs run within directive/component. (given used two-way data-bindings)
from code above, cannot see trigger localmenucontroller run again.
Comments
Post a Comment