1

在我的 angularjs 应用程序中，我正在为每个页面呈现我的“导航栏”div。

用户登录并重定向到详细信息页面后，我希望我正在更新 $scope ，它没有反映到视图中。

为了反映 $scope 的变化，我使用 $scope.$apply() 调用 $digest。似乎它没有更新，并且 $scope 更新仍然没有反映在我的观点中。

我的代码如下所示：

CONTROLLER:

function NavCtrl($scope){
    //as isAuth false
    $scope.showLogin = true;
    $scope.showLogout = false;
}

function ProductDetails($scope){
    //as isAuth true
    $scope.showLogin = false; 
    $scope.showLogout = true; 

    if (!$scope.$$phase) {
        //$digest or $apply to reflect update of scope update
        $scope.$apply();
    }
}

VIEW:

<div id="navigation-bar" ng-controller="NavCtrl">
    <li ng-show="showLogin"><a href="/login">Login</a></li>
    <li ng-show="showLogout"><a href="/logout">Logout</a></li>
</div>

我做错了什么？我错过了什么吗？顺便说一句，我遇到了其他问题，例如AngularJS $scope 更新未反映在视图中，但对我的情况没有帮助。

4

3 回答 3

0

问题是您应该为此使用单个控制器。这是一个控制器示例，它将根据其connected范围变量显示正确的菜单。该值是使用 AJAX 或代码中的其他位置设置的。

控制器：

function NavCtrl($scope, $rootScope){
    $scope.showLogin = true;
    $scope.showLogout = false;

    $rootScope.$watch("connected", function() {
        if ($rootScope.connected) {
            $scope.showLogin = false;
            $scope.showLogin = true;
        } else {
            $scope.showLogin = true;
            $scope.showLogin = false;
        }
    });
}

看法：

<div id="navigation-bar" ng-controller="NavCtrl">
    <li ng-show="showLogin"><a href="/login">Login</a></li>
    <li ng-show="showLogout"><a href="/logout">Logout</a></li>
</div>
<a href="javascript:" ng-click="$root.connected = true">Connect me</a>
于 2013-08-27T13:56:11.793 回答
0

主要问题是您使用了两个不同的控制器。每个控制器都有自己的作用域（即作用域不是全局的），因此当您在 ProductDetails 中更改 showLogin 时，只有局部作用域会发生变化，而不是 NavCtrl 的作用域。

您可以重写它以使用一个控制器，或者在控制器之间传递数据，有几种方法可以做到这一点：

  • 您可以在 $rootScope 上设置数据。rootScope 是一个全局范围，所有控制器都可以访问，并且您始终可以在模板中使用它。我建议将 rootScope 保持在最低限度，因为 rootScope 在任何地方都是共享的，并且您最终可能会在其中遇到一大堆变量。
  • 您可以通过服务传递数据。每个服务只创建一个实例，因此不同的控制器可以访问相同的服务并获取相同的数据。
  • 您可以使用 .$broadcast 向任何子控制器发送信号。这可能也最好保持在最低限度，很多广播迟早会减慢您的速度（尽管限制应该很高）。
于 2013-08-27T13:56:32.030 回答
0

我建议使用 AuthUserService 来跟踪登录状态，并将该服务注入到您的 NavCtrl 和任何其他需要了解用户的控制器中：

.factory('AuthUserService', ['$http','$q',
function($http, $q) {
    var user = {};
    return {
        user:  function() { 
            return user; 
        },
        login: function(user_credentials) {
            $http.post('/login', user_credentials).then(
               function(response) {
                  angular.copy(response.data, user);
                  ...
            });
        },
        logout: function() { ...
        }
     }
}])


.controller('NavCtrl', ['AuthUserService','$scope',
function(AuthUserService, $scope) {
    $scope.user = AuthUserService.user();
    $scope.$watch('user.name', function(name) {
       if(name) { 
           $scope.loggedIn = true;
       } else { 
           $scope.loggedIn = false;
       }
    });
}])


<div ng-controller="NavCtrl">
    <li ng-hide="loggedIn"><a href="/login">Login</a></li>
    <li ng-show="loggedIn"><a href="/logout">Logout</a></li>
</div>
于 2013-08-28T02:29:22.057 回答