example - componentes angularjs
¿Por qué tengo que llamar a $ scope. $ Digest() aquí? (3)
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?
$ 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.
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.
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
};
};