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 updatesのような他の質問をしましたが、私の場合は役に立ちません。

4

3 に答える 3

0

主な問題は、2 つの異なるコントローラーを使用していることです。各コントローラーには独自のスコープがあります (つまり、スコープはグローバルではありません)。したがって、ProductDetails で showLogin を変更すると、変更されるのはローカル スコープのみであり、NavCtrl のスコープではありません。

1 つのコントローラーを使用するように書き換えるか、コントローラー間でデータを渡すことができます。これにはいくつかの方法があります。

  • $rootScope にデータを設定できます。rootScope は、すべてのコントローラがアクセスでき、テンプレートでいつでも使用できるグローバル スコープです。rootScope はどこでも共有されているため、rootScope は最小限に抑えることをお勧めします。
  • サービスを介してデータを渡すことができます。各サービスのインスタンスは 1 つだけ作成されるため、異なるコントローラーが同じサービスにアクセスして同じデータを取得できます。
  • .$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 に答える