2016-11-13 6 views
1

Я новичок в Angularjs, и у меня есть приложение с некоторыми «проектами», в которых на некоторых страницах отображается локальное меню. Index.html содержит основную Navbar с сноской:Вложенной контроллер Angularjs называется только один раз

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

Так что я вложенный контроллером LocalMenuController для локального меню и главного контроллера. Контроллер проекта устанавливает ДАННЫЕ:

angular.module('ProjectCtrl',[]).controller('ProjectController',function($scope,$location, ProjectService,$route, AuthenticationService, $rootScope){ 

    $scope.setProjectDatas = function(projectName, projectId){ 
     ProjectService.setName(projectName); 
     $rootScope.projectId = projectId; 
    };}); 

Я установить идентификатор одного проекта к $ rootScope для тестирования (у меня есть служба, которая будет делать это лучше) и получить его в LocalMenuController:

angular.module('LocalMenuCtrl',[]).controller('LocalMenuController', function($scope, ProjectService, $rootScope) { 
    $scope.projectId = ''; 
    $scope.projectId = $rootScope.projectId; 
}); 

отобразить проекты в таблице, и когда я нажал на одну из нее, функция setProjectDatas (имя, идентификатор) называется. Проблема в том, что когда я щелкнул по одному проекту, идентификатор проекта правильный и установлен, но когда я перехожу к предыдущему и нажал на другой проект, идентификатор - это старый идентификатор проекта, который был нажат ранее. Данные не обновляются. Я искал свою проблему, но ничего не нашел.
Я думаю, что LocalMenuController называется только один раз, но не после.

Что я делаю неправильно?

Спасибо

UPDATE
Я создал директиву, которая отображает шаблон, но он все еще не обновляя частичный вид localMenu. LocalMenu Директива:

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

Часть index.html

<div ng-if="isAuthenticated() && displayProjectMenu == true" ng-controller="LocalMenuController"> 
       <div local-menu></div> 
      </div> 

Частичный вид 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> My team </a></li> 
    </ul> 
</div> 

Я пытаюсь получить ProjectID из $ rootScope и введите его в <a href="#/project/{{projectId}}", но у меня есть некоторые проблемы. Каков способ сделать это?

ответ

1

Прежде всего, попробуйте использовать directives вместо ng-контроллера. Вы можете инкапсулировать код и шаблон в единицу. Вы также можете попробовать создать component. Передайте некоторые данные в директиву/компоненту, и Angular позаботится о том, чтобы обновить шаблон и запустить все, что должно выполняться в директиве/компоненте. (Учитывая, что вы использовали двусторонние привязки данных)

Из приведенного выше кода я не вижу, что вызовет запуск LocalMenuController снова.

+0

Я создал директиву, но все еще не работаю. Я обновил свой пост, но это правильный способ сделать это? – timp

+1

Внесите атрибут под названием projectId в директиву, и в вашем шаблоне вы можете добавить project-id = "projectId", маловероятно, что вам нужно использовать $ rootScope для обмена данными. – norbertk

+0

Да, спасибо, он отлично работает! – timp

Смежные вопросы