24

ng-view の外にある NavbarCtrl があります。サービスと通信してユーザーをログインさせるログイン コントローラーがあります。ユーザーがログインしたら、Navbar をユーザーのメール アドレスで更新します。ただし、私の人生では、ユーザーがログインすると、「認証」サービスに読み込まれたデータで Navbar スコープを更新できないようです。

これは私のメインの index.html です:

<div class="navbar navbar-inverse navbar-fixed-top">

        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Brim</a>

                <div class="pull-right"  ng-controller="NavbarCtrl">
                    <div ng-click="refresh()">hello</div>
                    {{ user.email }}
                </div>
            </div>
        </div>

    </div>

    <div class="container" ng-view>

そして私のサービス：

.factory('Auth', function($resource) {
    var authenticated = false;
    var user = {};
    return {
        isAuthenticated: function () {
            return authenticated;
        },
        getUser: function() {
            return user;
        },
        login: function(loginUser, callback) {
            user =  {email:'email@email.com'}
            authenticated = true;
            callback(true);
            //actual code for logging in taken out for brevity
        }
    }
})

そして私の Login と Navbar コントローラ:

function LoginCtrl($scope, $location, Auth) {

$scope.login = function() {
    Auth.login($scope.user, function(success) {
        if(success) $location.path('/dashboard');
        //console.log(Auth.getUser())
    });
}

}

function NavbarCtrl($scope, Auth)  {

//thought this should work
$scope.user = Auth.getUser();

//experimenting unsuccessfully with $watch
$scope.$watch(Auth.isAuthenticated(),function () {
    $scope.user = Auth.getUser()
})

//clicking on a refresh button is the only way I can get this to work
$scope.refresh = function() {
    $scope.user = Auth.getUser()
}
}

私の調査から、 $scope.user = Auth.getUser(); と思ったでしょう。うまくいきますが、そうではなく、ユーザーがログインしたときに Navbar を更新する方法について完全に途方に暮れています。

4

3 に答える 3

54

更新:まあ、あなたは毎日何か新しいことを学びます...()関数の結果を見るために削除するだけです:

$scope.$watch(Auth.isAuthenticated, function() { ... });

Updated fiddle

$scope.isAuthenticatedこのフィドルでは、値が変化したときに「watch1」と「watch3」の両方が 2 回目のトリガーになることに注意してください。

したがって、これはservice で定義されたプリミティブ値への変更を監視するための一般的な手法です。

  • プリミティブ (の値) を返す API/メソッドを定義する
  • $watch その方法

サービスで定義されているオブジェクトまたは配列への変更を監視するには:

  • オブジェクト/配列を返す (への参照) API/メソッドを定義する
  • サービスでは、オブジェクト/配列のみを変更するように注意し、再割り当てしないでください。
    たとえば、これをしないでください:user = ...;
    むしろ、これを実行してください: angular.copy(newInfo, user)またはこれを実行してください:user.email = ...
  • 通常、ローカルの $scope プロパティにそのメソッドの結果を割り当てます。したがって、$scope プロパティは実際のオブジェクト/配列への参照になります。
  • $watch スコープ プロパティ

例：

$scope.user = Auth.getUser();
// Because user is a reference to an object, if you change the object
// in the service (i.e., you do not reassign it), $scope.user will
// likewise change.
$scope.$watch('user', function(newValue) { ... }, true);
// Above, the 3rd parameter to $watch is set to 'true' to compare
// equality rather than reference.  If you are using Angular 1.2+
// use $watchCollection() instead:
$scope.$watchCollection('user', function(newValue) { ... });

元の答え:

関数の結果を監視するには、その関数をラップする関数に $watch を渡す必要があります。

$scope.$watch( function() { return Auth.isAuthenticated() }, function() { ... });

フィドル。$scope.isAuthenticatedフィドルでは、値が変化したときに「watch3」のみが 2 回目のトリガーになることに注意してください。(それらはすべて、$watch の初期化の一部として、最初にトリガーされます。)

于 2013-03-13T17:09:43.280 に答える
0

変数名として使用userすることは、一般的には良い考えではありません。一度変更したら、currentUserすべてがうまくいきました。

于 2016-05-25T19:45:07.430 に答える
0

変更してみる

$scope.$watch(Auth.isAuthenticated(),function () { $scope.user = Auth.getUser() })

に

$scope.$watch(Auth.isAuthenticated(),function () { $scope.user = Auth.getUser() }, true)

詳細な説明については、AungularJs の$watch ドキュメントを参照してください。デフォルト値は false です。これは、Angular が参照によって最初のパラメーター値の変更を検出することを意味し、true を渡すと、チェックが同等に行われることを意味します。パラメータが関数であるため、関数への参照は常に同じであるため、チェックは常に false を返します。

于 2013-03-13T08:53:33.617 に答える