oninit example directives componentes component bindings angularjs data-binding angularjs-directive

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