AngularJS Diferencias de scope entre 1.0.x y 1.2.x

A partir del lanzamiento del próximo AngularJS estable, estoy migrando mi aplicación de la versión 1.0.8 a la 1.2 .

En AngularJS 1.0.8 fue posible configurar un scope aislado para directivas como follow . La directiva usaría entonces su propia function de test() lugar de la function de test() del controller.

HTML

 <my-dialog property="something"> <button ng-click="test()">Load Test</button> Check out the test: "{{ testMessage }}" </my-dialog> 

Javascript

  .controller('Ctrl', function(scope) { scope.test = function () { scope.testMessage = 'CTRL Test loaded! Whooops.'; } }) .directive('myDialog', function() { return { restrict: 'E', scope: { property: '=' }, link: function(scope) { scope.test = function () { scope.testMessage = 'Isolated Test loaded. Yes!'; } } }; 

En AngularJS 1.2 este comportamiento ya no funciona. Al hacer clic en el button se dispara la function de test() del controller ahora.

Vea esta comparación jsFiddle:

  • Angular 1.0.8
  • Angular 1.2.0

¿Qué cambios tiene exactamente y cómo puedo reproducir el comportamiento anterior?

Nota

Me di count de que podía colocar la plantilla de directivas dentro de un file HTML adicional o comstackrla como una cadena para ponerla en funcionamiento ( jsFiddle ) pero parece ser demasiado en mi caso, ya que la plantilla está arreglada y dividir el HTML en varias partes parciales Los files HTML son una molestia.

EDITAR

La respuesta de @ elclanr funciona bien cuando no hay otras properties para compartir. Actualicé el jsFiddle para pasar alguna propiedad arbitraria. ¿Cómo debo proceder ahora?

Parece que este es un resultado previsto del cambio de rotura: github.com/angular/angular.js/commit/… Que se extrajo en 1.2.0 (después de rc3) ( https://github.com/angular/angular. js / blob / master / CHANGELOG.md – vea el primer cambio de ruptura para 1.2.0 – $ compile):

Soluciona el problema con el scope aislado que se filtra por todas partes en otras directivas en el mismo elemento.

El scope aislado ya está disponible solo para la directiva de aislamiento que lo solicitó y su plantilla.

Una directiva no aislada no debe get el scope aislado de una directiva de aislamiento en el mismo elemento, sino que recibirá el ámbito original (que es el scope principal del ámbito aislado recién creado).

También vea esta discusión: github.com/angular/angular.js/issues/4889

Notablemente: "El scope aislado solo se aplica a la plantilla, pero no al marcado que no fue contribuido por la directiva. Antes de 1.2 ámbitos aislados tenía un error que causaba este tipo de fuga. El objective del scope aislado es que solo se aplica a la directiva que lo declaró, y no a otras directivas o marcado. "(de tbosch)

Antes de 1.2.0 todo en el mismo elemento DOM compartía el mismo scope. Entonces 1.2.0 realiza un cambio sustancial en cómo funcionan las directivas con ámbitos aislados.

Establecer scope: true debería resolver el problema. http://jsfiddle.net/rug3J/1 . También aconsejaría seguir la convención y nombrarla scope y no $scope cuando no se haya inyectado una dependencia:

 .directive('myDialog', function() { return { restrict: 'E', scope: true, link: function(scope) { scope.test = function () { scope.testMessage = 'Isolated Test loaded. Yes!'; } } }; 

Para combinar el marcado normal con las templates y funciones específicas de la directiva, se necesita hacer uso de la opción transclude de la siguiente manera:

Ver: jsFiddle

HTML

 <div ng-app="myApp"> <div ng-controller="Ctrl"> <my-directive property="{{ something }}"> <p>{{ text }}</p> </my-directive> </div> </div> 

Javascript

 .controller('Ctrl', ['$scope', function($scope) { $scope.text = 'This is a controllers text.'; $scope.something = 'This is another controllers text.'; }]) .directive('myDirective', function() { return { restrict: 'E', transclude: true, template: '<button ng-click="test()">Fire directives function</button><div ng-transclude></div><p>{{ property }}</p>', scope: { property: '@' }, link: function(scope) { scope.test = function () { scope.property = 'Loaded directives text.'; } } }; }); 

Esto funciona bien para mí ahora, pero debe tenerse en count que uno no puede anular las properties existentes del scope.