我是Angularjs的新手,我有一个应用程序,有一些“项目”,在某些页面上显示了本地菜单。 Index.html 包含带有页脚的主导航栏:
<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;
};});
我将一个项目的id设置为 $ rootScope 进行测试(我有一个服务可以做得更好)并在 LocalMenuController 中获取它:
angular.module('LocalMenuCtrl',[]).controller('LocalMenuController', function($scope, ProjectService, $rootScope) {
$scope.projectId = '';
$scope.projectId = $rootScope.projectId;
});
我在表格中显示项目,当我点击其中一个项目时,会调用函数 setProjectDatas(name,id)。问题是,当我点击一个项目时,项目的ID是正确的并且设置但是当我前一个并单击另一个项目时,id是之前单击的项目的旧ID。数据未更新。我搜索了我的问题,但没有发现任何内容 我认为 LocalMenuController 只被调用一次但不是之后。
我做错了什么?
谢谢
更新
我已经创建了一个显示模板的指令,但它仍然没有更新局部视图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获取 projectId 并将其注入<a href="#/project/{{projectId}}"
,但我遇到了一些麻烦。有什么办法呢?
答案 0 :(得分:1)
首先,尝试使用directives代替ng-controller。您可以将代码和模板封装到一个单元中。您也可以尝试创建component。将一些数据传递给指令/组件,Angular将负责更新模板并运行在指令/组件中运行的任何需要。 (鉴于您使用了双向数据绑定)
从上面的代码中,我看不到会触发LocalMenuController再次运行的内容。