Angularjs

Question

我正在尝试使用根据 link 改变的 scopa 变量来更改菜单栏的状态，但我无法捕捉到其中的错误，因为它不起作用。

菜单栏：

    <body ng-app="publicApp">
    ......
               <ul class="nav" ng-controller="LocationController">
                   <li ng-class="{'active': activeURL == 'home', 'gray': activeURL != 'home'}" >
                       <a href="<c:url value="#/"/>"
                          title='<spring:message code="header.home"/>'>
                           <p><spring:message code="header.home"/></p>
                       </a>
                   </li>
                   <li ng-class="{'gray': activeURL == 'contacts', '': activeURL != 'contacts'}">
                    <a title='<spring:message code="header.contacts"/>' href="<c:url value='#/contacts'/>">
                        <p><spring:message code="header.contacts"/></p>
                    </a>
                   </li>
                   <li ng-class="{'gray': activeURL == 'register', '': activeURL != 'register'}">
                    <a title='<spring:message code="header.register"/>' href="<c:url value='#/newUser'/>">
                        <p><spring:message code="header.register"/></p>
                    </a>
                   </li>
               </ul>
    ......

    <div class="jumbotron" style="padding: 50px">
        <div ng-view>
        </div>
    </div>
.....
</body>

然后app.js

var publicApp = angular.module('publicApp', ['ngRoute']);
publicApp.controller("LocationController", function($scope, $location) {
    if($location.$$absUrl.lastIndexOf('/newUser') > 0){
        $scope.activeURL = 'register';
    } else if($location.$$absUrl.lastIndexOf('/contacts') > 0){
        $scope.activeURL = 'home';
    }else{
        $scope.activeURL = 'home';
    }
});
publicApp.config(function ($routeProvider) {
    $routeProvider.when('/',
                      { templateUrl: 'login'});
    $routeProvider.when('/newUser',
                      { templateUrl: 'newUser', controller : 'LocationController'});
    $routeProvider.otherwise({ redirectTo: '/' });
});

我希望当用户按下其中的 link 时，菜单栏的布局会发生变化。

Answer 1

发现问题，这是一个范围问题。找到解决方案 here.

我这样修改代码：

 var publicApp = angular.module('publicApp', ['ngRoute']);


publicApp.controller("LocationController", function($scope, $location) {

    if($location.$$absUrl.lastIndexOf('/newUser') > 0){
        $scope.$parent.activeURL = 'register';
    } else if($location.$$absUrl.lastIndexOf('/contacts') > 0){
        $scope.$parent.activeURL = 'home';
    }else{
        $scope.$parent.activeURL = 'home';
    }
});


publicApp.config(function ($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'login', controller : 'LocationController' });
    $routeProvider.when('/newUser', { templateUrl: 'newUser', controller : 'LocationController' });
    $routeProvider.otherwise({ redirectTo: '/', controller : 'LocationController'  });
});

不优雅但工作。控制器是嵌套的，然后我需要调用 $scope.$parent 来设置全局 activeURL 变量。

Angularjs - 使用 $scope 变量更改菜单栏状态，link 由 ngRoute 管理

Angularjs - using a $scope variabile to change menubar status, link managed by ngRoute

javascript

ngroute