link - directivas angularjs
Alcance aislado con simple directiva anidada angularjs. (2)
Por favor, compruebe este plnkr
He leído todo lo que puede encontrar sobre directivas, alcance y ámbitos aislados. Pero todavía no puedo entender la manera de hacer que esto funcione.
La directiva que creé funciona perfectamente siempre que no esté anidada dentro de otra directiva.
Cuando están anidados, los atributos ''localFunc: "y func'' ''se unen al alcance del controlador externo muy bien, pero el alcance'' localAttr:" = attr "''falla.
Estaría muy agradecido si alguien me puede ayudar a entender por qué.
Nunca falla. Las horas de búsqueda de Google no muestran nada hasta que escribo la pregunta, ¡entonces obtengo la combinación de palabras clave de búsqueda y listo! Aparece la respuesta.
Gracias a esta publicación tan esclarecedora , aprendí que mi problema es tan común que incluso la solución tiene un nombre: "La regla de los puntos".
Básicamente, necesita referirse a un objeto heredado en el controlador en lugar de a una propiedad y el problema desaparece.
Pictóricamente, aquí es cómo se ven sus ámbitos antes de escribir en cualquiera de los cuadros de texto:
Tenga en cuenta que el elemento primario aislado del ámbito 006 es el ámbito transcluido creado por el container directivas. Como tal, el searchText en el alcance 006 será enlazado al alcance 005 (en lugar del alcance 003) porque se está utilizando una primitiva.
Si escribimos 11 en el primer cuadro de texto, y 22 en el segundo cuadro de texto y examinamos de nuevo los ámbitos, podemos ver dónde tuvo lugar el enlace de datos:
searchforThis2 es de color amarillo en el alcance 005 para indicar que se creó una nueva propiedad. Esto sucedió porque se usa una primitiva: el alcance 005 no usa la herencia prototípica aquí, simplemente crea una nueva propiedad primitiva en sí mismo (es decir, no busca en el alcance 003 el nombre de la propiedad). Los otros elementos amarillos indican que los valores primitivos cambiaron.
Como ya descubrió, la solución de "mejor práctica" para este problema es vincular las propiedades del objeto (en lugar de las primitivas) en el ámbito principal (es decir, el alcance 003).
Usando lo siguiente en su controlador:
$scope.obj = {searchforThis1: "Sample Text 1", searchforThis2: "Sample Text 2"};
y en tu HTML:
<search searchtext="obj.searchforThis1"...>
...
<div container>
<search searchtext="obj.searchforThis2"...>
Los ámbitos ahora se parecen a los siguientes:
Si escribimos 11 en el primer cuadro de texto, y 22 en el segundo cuadro de texto y examinamos de nuevo los ámbitos, podemos ver dónde tuvo lugar el enlace de datos:
Debido a que el alcance 006 es un alcance aislado, usa su $parent para obtener el alcance 005 (como arriba). A partir de ahí, sin embargo, la herencia prototípica está en juego, ya que no estamos utilizando primitivas. La propiedad de objeto searchforThis2 se encuentra en el alcance 003.