Question

的index.html

<body ng-app="dnaClientApp" ng-controller="MainCtrl">
<ul class="nav navbar-nav navbar-collapse">
    <li ng-repeat="item in menu" ng-class="{active: item.route === menuActive }"><a href="#{{item.route}}">{{item.label}}</a> 
    </li>
</ul>

MainCtrl main.js

.controller('MainCtrl', function ($scope, $route, $rootScope, $location, $cookies, translationSvc, $http, $cookieStore, UserService) {

       if (typeof $scope.selectedLanguage === 'undefined') {

            $scope.selectedLanguage = 'fi';//Default language

        }
        translationSvc.getTranslation($scope, $scope.selectedLanguage);


        $scope.menu = translationSvc.getMenu($scope.selectedLanguage);//Creating menus dynamically
        console.log('$scope.menu-->' + $scope.menu + ' length: ' + $scope.menu.length);

        $scope.menuActive = '/';

        $rootScope.$on('$routeChangeSuccess', function (e, curr, prev) {
            $scope.menuActive = $location.path();
        });

translationSvc

var getMenu = function($scope, language) {
        if (language === 'fi' && typeof $rootScope.userRole !== 'undefined' && typeof $rootScope.userRole.currentUserRole !== 'undefined' && $rootScope.userRole.currentUserRole.userRole === 3 ) {

            $scope.menu = [
                {label: 'Home', route: '#/'},
                {label: 'DNA', route: '#/dna'},
                {label: 'Dna-list', route: '#/dna-list'},
                {label: 'Admin', route: '#/admin'}

            ]

        }else...

登录后的路线进入此处，菜单位于index.html

.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })

问题

如果我检查控制器中菜单数组的长度，一切正常，但标题中的菜单都是相同的，默认菜单（3个菜单，而不是4个菜单）。我做错了什么或为什么我不能动态更新菜单？想法是为不同的角色获取不同的菜单，例如管理员也可以看到管理员菜单等。还有其他任何工作想法来完成这项工作吗？

Answer 1

我不喜欢将$scope传递给服务的想法。它使服务非常混乱，因为您不知道它正在改变哪些数据。相反，为什么不在translationSvc.getMenu()中构建菜单并将其返回到MainCtrl。我不明白为什么这样的事情不应该起作用，除非你没有发布的代码正在做其他事情。

<强>控制器：

.controller('MainCtrl', function ($scope, $route, $rootScope, $location, $cookies, translationSvc, $http, $cookieStore, UserService) {
    ...

    // Creating menus dynamically
    $scope.menu = translationSvc.getMenu($scope.selectedLanguage);

    ...
}

<强> translationSvc：

var getMenu = function(language) {
    var newMenu = []

    if (language === 'fi' && typeof $rootScope.userRole !== 'undefined' && typeof $rootScope.userRole.currentUserRole !== 'undefined' && $rootScope.userRole.currentUserRole.userRole === 3 ) {

        newMenu = [
            {label: 'Home', route: '#/'},
            {label: 'DNA', route: '#/dna'},
            {label: 'Dna-list', route: '#/dna-list'},
            {label: 'Admin', route: '#/admin'}
        ];

    } else if (...) {
        newMenu = [...];
    } else {
        newMenu = [...];
    }

    return newMenu;
}

我认为你遇到的问题是你在角度范围之外更新$scope，即角度无法知道你正在改变$scope in translationSvc因此您的更改未传播到您的视图（index.html）。

我还建议您沿着相同的行编辑translationSvc.getTranslation()，然后删除$scope到该函数的传递。

Answer 2

我认为更改菜单时不会执行摘要循环。

将其包装到$ timeout以强制摘要循环，并且不要忘记添加$ timeout作为依赖

$timeout(function(){
$scope.menu=translationSvc.getMenu($scope, $scope.selectedLanguage);//Creating menus dynamically
});

Answer 3

我添加了$ viewContentLoaded，它开始工作了。页面之间有登录系统，我认为这可能是限制路线等问题。

$scope.$on('$viewContentLoaded', function() {
            $scope.menu = translationSvc.getMenu($scope.selectedLanguage);
        });

在AngularJS应用程序中登录后动态更改菜单

3 个答案: