Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:09_directivas:02_scope [2014/08/29 14:34]
admin [Enlace unidireccional vs bidireccional]
+++ unidades:09_directivas:02_scope [2015/02/15 09:47] (actual)
admin [Enlace unidireccional vs bidireccional]
@@ Línea 255: / Línea 255: @@
 ==== Enlace unidireccional vs bidireccional ====
-Ahora que hemos visto los 2 tipos de enlace con "@" y "=" vamos ha hacer una comparativa entre ellos
+Ahora que hemos visto los tipos de enlacen unidireccionales y bidireccionales vamos ha hacer una comparativa entre ellos
 ^  ^  Enlace unidireccional  ^  Enlace bidireccional  ^
@@ Línea 261: / Línea 261: @@
 | Expresión para enlazar a valores literales |  ''valor''  |  '''valor''' ((Si es un número se pone directamente el número sin apostrofes))  |
 | Expresión para enlazar a propiedades del ''$scope'' del controlador |  ''%%{{nombrePropiedad%%}}''  |  ''nombrePropiedad''  |
-| Si se modifica la propiedad del ''$scope'' del controlador | Si se modifica la propiedad del ''scope'' de la directiva | Si se modifica la propiedad del ''scope'' de la directiva |
+| Si se modifica la propiedad del ''$scope'' del controlador | Si se modifica la propiedad del ''scope'' de la directiva ((Solo se aplica si hemos puesto el nombre de una propiedad del ''$scope'' entre llaves ))  ((No se cambiaría si desde la directiva se cambia el valor de la propiedad)) | Si se modifica la propiedad del ''scope'' de la directiva |
-| Si se modifica la propiedad del ''scope'' de la propiedad | **NO** se modifica la propiedad del ''$scope'' del controlador | **Si** se modifica la propiedad del ''$scope'' del controlador |
+| Si se modifica la propiedad del ''scope'' de la directiva | **NO** se modifica la propiedad del ''$scope'' del controlador | **Si** se modifica la propiedad del ''$scope'' del controlador |
+Ahora la pregunta que nos queda es: ¿cuando usar uno u otro?
+La respuesta es sencilla, solo depende de si vamos a necesitar cambiar una propiedad del ''$scope'' del controlador desde la directiva.
+  * Si queremos cambiar una propiedad del ''$scope'' del controlador desde la directiva deberemos usar el enlace bidireccional
+  * Si **NO** queremos cambiar una propiedad del ''$scope'' del controlador desde la directiva deberemos usar el enlace unidireccional y asi evitamos la posibilidad de un error y que pudiéramos cambiar el ''$scope'' del controlador de la directiva sin quererlo.
+<note>
+Hay un tipo más de enlace que se usa para enlazar funciones. El carácter usado es "&" y ya lo veremos en la unidad de [[unidades:12_directivasadv:00_start]]
+</note>
+==== Distintos nombres ====
+Una última característica que nos permite AngularJS al enlazar con las propiedades del ''scope'' es hacer que tengan distinto nombre.
+Imaginemos que hemos decidido que el atributo ''texto'' de la direcctiva ahora se llame ''txt''.
+La directiva ahora se utilizaría de la siguiente manera:
+<sxh html>
+<ac-titulo txt="{{mensaje}}"></ac-titulo>
+</sxh>
+Pero hemos decidido que no queremos cambiar la propiedad del ''scope'' de la directiva que queremos que siga siendo ''texto''. Pues solo tenemos que para añadir a la "@" ((O al "=")) el nombre del atributo en caso de que no esa igual que el de la propiedad del ''scope''.
+<sxh js;highlight: [8]>
+app.directive("acTitulo",[function() {
+  var directiveDefinitionObject ={
+    restrict:"E",
+    replace : true,
+    template:"<h1>{{texto}}</h1>",
+    scope:{
+      texto:"@txt"
+    }
+  }
+  return directiveDefinitionObject;
+}]);
+</sxh>
+  * Línea 8: Al ser distinto el nombre del atributo y el nombre de la propiedad del ''scope'' , le ponemos junto a la "@" el nombre del atributo de la directiva.
+Y ahora ya podemos usar la directiva con el atributo "txt" en vez de "texto".
 ===== Ejemplo =====
+El ejemplo consiste en hacer 2 directivas como la última que hemos usado , la del botón, pero que una de ellas tanga enlace unidireccional y la otra enlace bidireccional.
+  * acTituloUnidireccional
+  * acTituloBidireccional
-{{url>http://embed.plnkr.co/ALVZoH}}
+Tendremos 2 propiedades en el ''$scope'' del controlador para en lazar en cada una de las directivas. Las propiedades son:
+  * ''mensajeUnidireccional''
+  * ''mensajeBidireccional''
+Al pulsar sobre los botones "Cambiar valor de scope.texto de la directiva" se cambiarán los valores de las propiedades del ''scope'' de las directivas y  se podrá comprobar si también se cambian las propiedades del ''$scope'' del controlador. De esa forma comprobaremos el enlace desde la directiva hacia el controlador.
+Al pulsar sobre los botones "Cambiar valor del $scope.mensaje del controlador" se cambiarán los valores de las propiedades del ''$scope'' de los controladores y  se podrá comprobar si también se cambian las propiedades del ''scope'' de las directivas. De esa forma comprobaremos el enlace desde el controlador hacia la directiva.
+{{url>http://embed.plnkr.co/ALVZoH}}
 ===== Referencias =====
   * [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|/ API Reference / ng / service / $compile / Directive Definition Object]]
   * [[https://docs.angularjs.org/guide/directive|/ Developer Guide / Directives]]
   * [[https://docs.angularjs.org/api/ng/type/angular.Module|/ API Reference / ng / type / angular.Module]]
+  * [[https://github.com/angular/angular.js/wiki/Understanding-Scopes|Understanding Scopes]]

unidades/09_directivas/02_scope.1409315644.txt.gz · Última modificación: 2014/08/29 14:34 por admin

Ir hasta arriba