Question

我有一个带有defaultController的Angular JS应用程序，它控制着应用程序的标题。然后我为每个视图都有一个其他控制器。视图将加载到<main>中。我使用$routeProvider使用以下代码加载视图：

myapp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/login', {
                templateUrl: 'templates/login.html',
                controller: 'loginController'
            }).
            when('/dashboard', {
                templateUrl: 'templates/dashboard.html',
                controller: 'dashboardController'
            }).
            ...

当加载的视图是仪表板时，我试图在标题内显示一个LOGOUT按钮，如果加载的视图是登录视图，则隐藏它。为了做到这一点，我在defaultController $location对象上，并使用ng-class正确添加和删除LOGOUT按钮中的类。

只有一个问题：$ location在我第一次加载页面时给出了正确的路径，但在我更改视图（由$routeProvider更改）之后，该变量不再更新，所以当我我实际上在/#/dashboard，$location.url仍然在/login。这里是控制器代码：

controllers.controller('defaultController', ['$scope', 'ipCookie', '$location', function($scope, ipCookie, $location) {
    $scope.url = $location.url();
    ...

我也尝试使用$window.location.hash同样的结果。

有什么想法吗？

编辑：在接受的答案之后，这是我在defaultController上添加的内容，以使其正常工作

$scope.$on("$locationChangeSuccess", function() {
        $scope.url = $location.url();      
    });

Answer 1

加载默认控制器后，可能会在服务中更新位置。

您可以将$location服务注入范围并根据它在模板中做出决策（然后会自动监视并重新评估），或者您可以监听$locationChangeSuccess事件

注入时，您只需$scope.location = $location然后使用<a ng-hide="location.path() != '/something'">之类的内容。

$location在根范围内广播$locationChangeSuccess，因此您应该能够在可用的范围内收听它：$scope.$on( "$locationChangeSuccess", function() { /* do something */ } );

使用$ routeProvider时，AngularJS $位置未正确更新

1 个答案: