Angularjs嵌套的控制器只被调用一次

Angularjs nested controller called just one time

本文关键字：一次 调用 嵌套 控制器 Angularjs      更新时间：2023-09-26

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

我在表中显示项目，当我单击其中一个时，函数 setprojectdata (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}}"，但我有一些麻烦。怎么做呢?

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

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

相关文章：