gpt4 book ai didi

javascript - Angularjs 嵌套 Controller 仅调用一次

转载 作者:太空宇宙 更新时间:2023-11-04 16:21:44 25 4
gpt4 key购买 nike

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

所以我有一个用于本地菜单的嵌套 Controller LocalMenuController和一个主 Controller 。项目控制者设置数据:

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 仅被调用一次,但之后不会被调用。

我做错了什么?

谢谢

更新
我创建了一个显示模板的指令,但它仍然没有更新局部 View 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>

部分 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> My team </a></li>
</ul>
</div>

我正在尝试从 $rootScope 获取 projectId 并将其注入(inject) <a href="#/project/{{projectId}}"但我有一些麻烦。有什么方法可以做到这一点?

最佳答案

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

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

关于javascript - Angularjs 嵌套 Controller 仅调用一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40578760/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com