2016-11-13 59 views
1

我是Angularjs中的新成员,我有一个应用程序,其中包含一些“项目”,在某些页面上显示本地菜单。 的Index.html包含主导航栏与页脚: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。该项目控制器将DATAS:

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

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

我一个项目的ID设置为$ rootScope测试(我有一个服务,这将做到这一点更好),并把它在LocalMenuController

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

我在一个表中显示的项目,当我点击它的一个,功能setProjectDatas(姓名,身份证)被调用。问题是当我点击一个项目时,项目的ID是正确的并且设置了,但是当我上一次并单击另一个项目时,ID是以前点击的项目的旧ID。数据没有更新。我搜索了我的问题,但没有发现任何问题。
我认为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> 

我试图让专案编号从$ rootScope注入并注入<a href="#/project/{{projectId}}"但我有一些麻烦。有什么办法做到这一点?

回答

1

首先,尝试使用directives而不是ng-controller。你可以将你的代码和模板封装到一个单元中。您也可以尝试创建一个component。将一些数据传递给指令/组件,Angular将负责更新模板并运行在指令/组件内运行的任何需求。 (鉴于您使用双向数据绑定)

从上面的代码,我看不到什么会触发LocalMenuController再次运行。

+0

我创建了一个指令,但仍然无法工作。我已经更新了我的帖子,但这是否正确吗? – timp

+1

向指令引入一个名为projectId的属性,并在模板中添加project-id =“projectId”,不太可能需要使用$ rootScope来共享数据。 – norbertk

+0

是的,谢谢你,它完美的作品! – timp