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 16:35] – [Enlace unidireccional vs bidireccional] adminunidades:09_directivas:02_scope [2015/02/15 09:47] (actual) – [Enlace unidireccional vs bidireccional] admin
Línea 262: Línea 262:
 | Expresión para enlazar a propiedades del ''$scope'' del controlador |  ''%%{{nombrePropiedad%%}}''  |  ''nombrePropiedad''  | | 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'' 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? Ahora la pregunta que nos queda es: ¿cuando usar uno u otro?
Línea 275: Línea 275:
  
  
-==== Distintos nombre ====+==== Distintos nombres ====
 Una última característica que nos permite AngularJS al enlazar con las propiedades del ''scope'' es hacer que tengan distinto nombre. 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 direc+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. 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.
Línea 300: Línea 325:
   * [[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.1409322941.txt.gz · Última modificación: por admin