example - componentes angularjs

¿Por qué tengo que llamar a $ scope. $ Digest() aquí?

Question

He creado una directiva para mostrar información sobre herramientas:

app.directive(''tooltip'',function(){
return{
restrict: ''A'',
link: function(scope,element,attr){
element.bind(''mouseenter'',function(e){
scope.setStyle(e);
});
}
}
});

La función setStyle() correspondiente:

$scope.setStyle = function(e){
$scope.style = {
position: ''absolute'',
// some other styles
};
$scope.$digest();
};

$scope.style se aplica a esto:

<span ng-style="style">I am a tooltip</span>

que es parte de mi vista, manejado por el controlador que posee $scope.style

¿Por qué tengo que llamar a $digest() para aplicar los cambios a $scope.style , que se declararon e $scope.style antes?

Answer 1

$ scope.apply () tiene dos implementaciones, una que no tiene argumentos y otra que tiene una función como argumento, la evalúa y desencadena un resumen (). El uso de este último tiene ventajas, ya que envuelve su función en la cláusula try / catch que se maneja con el servicio $ exceptionHandler.

Aunque, también puedes hacer esto:

$scope.$apply(scope.setStyle(e));

Esto envolverá su llamada de función para aplicar y desencadena automáticamente el resumen.

Answer 2

Debido a que la devolución de llamada adjunta al evento mouseenter está fuera del alcance de angular; angular no tiene idea de cuándo se ejecuta / finaliza esa función, por lo que el ciclo de resumen nunca se ejecuta.

Llamar a $digest o $apply le indica a angular que actualice los enlaces y dispare los relojes.

Answer 3

element.bind() significa escuchar un evento específico del navegador y ejecutar la devolución de llamada cuando este evento se distribuye en el elemento. En ninguna parte de esta cadena de eventos se incluye Angular; no sabe que el evento ocurrió. Por lo tanto debes decirle explícitamente sobre el evento. Sin embargo, en la mayoría de los casos, debe usar $scope.$apply() no $scope.$digest() , especialmente cuando no está seguro.

Aquí está el código más apropiado para su situación:

app.directive(''tooltip'',function(){
return{
restrict: ''A'',
link: function(scope,element,attr){
element.bind(''mouseenter'',function(e){
scope.setStyle(e);
scope.$apply();
});
}
}
});

y setStyle() :

$scope.setStyle = function(e){
$scope.style = {
position: ''absolute'',
// some other styles
};
};