Muestra las diferencias entre dos versiones de la página.
unidades:09_directivas:02_scope [2014/08/29 14:36] admin [Enlace unidireccional vs bidireccional] |
unidades:09_directivas:02_scope [2015/02/15 09:47] (actual) admin [Enlace unidireccional vs 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 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'' | | | 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? | 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]] |