angularjs - personalizadas - directivas angular 6

Variable de servicio no actualizada en el controlador

Question

Tengo un NavbarCtrl que está fuera de ng-view. Tengo un controlador de inicio de sesión que habla con un servicio para que un usuario inicie sesión. Una vez que el usuario haya iniciado sesión, quiero que la barra de navegación se actualice con la dirección de correo electrónico del usuario. Sin embargo, durante toda mi vida, parece que no puedo actualizar el alcance de la barra de navegación con los datos que se cargan en mi servicio "Autent" una vez que el usuario ha iniciado sesión.

Este es mi index.html principal:

<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>

Y mi servicio:

.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 protected]''}
            authenticated = true;
            callback(true);
            //actual code for logging in taken out for brevity
        }
    }
})

Y mis controladores de Login y 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()
}
}

De mi investigación habría pensado que $ scope.user = Auth.getUser (); funcionaría, pero no lo es y estoy completamente perdido en cuanto a cómo puedo actualizar mi Navbar cuando un usuario inicia sesión. Gracias de antemano por cualquier ayuda.

Answer 1

Trata de cambiar

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

a

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

Consulte la documentación de AungularJs $ watch para obtener una explicación detallada; el valor predeterminado es falso, lo que significa que Angular detecta cambios en los valores del primer parámetro por referencia, mientras que pasar el valor verdadero significa que la verificación se realiza de manera equitativa. Al ser el parámetro una función, la comprobación siempre es falsa, ya que la referencia a la función es siempre la misma.

Answer 2

Usar al user como nombre de variable generalmente no es una buena idea. Una vez lo cambié, ti currentUser todo funcionó para mí.

Answer 3

Actualización : bueno, aprendes algo nuevo todos los días ... simplemente elimina el () para ver los resultados de una función:

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

Violín actualizado

En este violín, observe cómo ''watch1'' y ''watch3'' se activan por segunda vez cuando cambia el valor de $scope.isAuthenticated .

Por lo tanto, esta es la técnica general para observar los cambios en un valor primitivo que se define en un servicio :

• define una API / método que devuelve (el valor de) la primitiva
• $ ver ese método

Para observar los cambios en un objeto o matriz que se define en un servicio :

• define una API / método que devuelve (una referencia a) el objeto / matriz
• En el servicio, tenga cuidado de solo modificar el objeto / matriz, no lo reasigne.
  Por ejemplo, no hagas esto: user = ...;
  En su lugar, haga esto: angular.copy(newInfo, user) o este: user.email = ...
• Normalmente, asignará a la propiedad $ scope local el resultado de ese método, por lo tanto, la propiedad $ scope será una referencia al objeto / matriz real.
• $ ver la propiedad de alcance

Ejemplo:

$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) { ... });

Respuesta original:

Para ver los resultados de una función, debe pasar $ watch una función que ajusta esa función:

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

Fiddle En el violín, observe cómo solo ''watch3'' se dispara por segunda vez cuando cambia el valor de $scope.isAuthenticated . (Todos se activan inicialmente, como parte de la inicialización de $ watch).