Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:09_directivas:02_scope

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:09_directivas:02_scope [2014/08/29 14:18] – adminunidades:09_directivas:02_scope [2015/02/15 09:47] (actual) – [Enlace unidireccional vs bidireccional] admin
Línea 114: Línea 114:
          
     }     }
 +  }
      
   return directiveDefinitionObject;   return directiveDefinitionObject;
Línea 136: Línea 137:
       texto:"@"       texto:"@"
     }     }
 +  }
      
   return directiveDefinitionObject;   return directiveDefinitionObject;
Línea 193: Línea 195:
       texto:"="       texto:"="
     }     }
 +  }
      
   return directiveDefinitionObject;   return directiveDefinitionObject;
Línea 221: Línea 224:
 Vamos ahora a cambiar la directiva para añadir un botón que cambie el valor del ''scope'' de la directiva. Vamos ahora a cambiar la directiva para añadir un botón que cambie el valor del ''scope'' de la directiva.
  
-<sxh js;highlight: [8]>+<sxh js;highlight: [6]>
 app.directive("acTitulo",[function() { app.directive("acTitulo",[function() {
      
Línea 227: Línea 230:
     restrict:"E",     restrict:"E",
     replace : true,     replace : true,
-    template:"<div><h1>{{texto}}</h1><br><button ng-click=\"texto='Texto cambiado desde dentro de la directiva'\">Cambiar valor scope.texto de la directiva</button></div>",+    template:"<div><h1>{{texto}}</h1><button ng-click=\"texto='Texto cambiado desde dentro de la directiva'\">Cambiar valor de scope.texto de la directiva</button></div>",
     scope:{     scope:{
       texto:"="       texto:"="
Línea 236: Línea 239:
 }]); }]);
 </sxh> </sxh>
 +  * Ahora la directiva incluye un botón que al pincharlo hace lo siguiente: ''texto='Texto cambiado desde dentro de la directiva''' pero como se ejecuta dentro de la directiva , lo que cambiar es la propiedad ''texto'' del ''scope'' de la directiva.
  
  
 +Si pinchamos en el botón se cambiaría también la propiedad ''mensaje'' del ''$scope'' del controlador. Es decir que ya tenemos el enlace bidireccional:
 +  * Si hay un cambio en el ''$scope'' del controlador se modifica el ''scope'' de la directiva
 +  * Si hay un cambio en el ''scope'' de la directiva se modifica el ''$scope'' del controlador.
 +
 +<note tip>
 ¿Que ocurre si usando ''texto:"="'' no queremos tener el texto en el ''$scope'' del controlador sino ponerlo directamente en la directiva. AngularJS tiene la siguiente sintáxsis: ¿Que ocurre si usando ''texto:"="'' no queremos tener el texto en el ''$scope'' del controlador sino ponerlo directamente en la directiva. AngularJS tiene la siguiente sintáxsis:
 <sxh html> <sxh html>
 <ac-titulo texto="'Texto directamente en el atributo'"></ac-titulo> <ac-titulo texto="'Texto directamente en el atributo'"></ac-titulo>
 </sxh> </sxh>
-Hay que fijarse en los 2 apostrofes que hemos puesto antes y después del texto.+Hay que fijarse en los 2 apostrofes que hemos puesto antes y después del texto 
 +.</note>
  
 +==== Enlace unidireccional vs bidireccional ====
 +Ahora que hemos visto los tipos de enlacen unidireccionales y bidireccionales vamos ha hacer una comparativa entre ellos
  
 +^  ^  Enlace unidireccional  ^  Enlace bidireccional  ^
 +| Carácter usado |  ''@''  |  ''=''  |
 +| 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 ((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 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 ===== ===== 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 ===== ===== Referencias =====
   * [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|/ API Reference / ng / service / $compile / Directive Definition Object]]   * [[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/guide/directive|/ Developer Guide / Directives]]
   * [[https://docs.angularjs.org/api/ng/type/angular.Module|/ API Reference / ng / type / angular.Module]]   * [[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.1409314703.txt.gz · Última modificación: por admin