| Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa |
| unidades:09_directivas:02_scope [2014/08/29 14:19] – [Enlace unidireccional] admin | unidades:09_directivas:02_scope [2015/02/15 09:47] (actual) – [Enlace unidireccional vs bidireccional] admin |
|---|
| texto:"=" | texto:"=" |
| } | } |
| | } |
| | |
| return directiveDefinitionObject; | return directiveDefinitionObject; |
| 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() { |
| | |
| 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:"=" |
| }]); | }]); |
| </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]] |
