directivas - Necesita algunos ejemplos de atributos de enlace en etiquetas AngularJS personalizadas

directivas angular 6

Question

Estoy intentando crear una etiqueta personalizada similar a la siguiente:

<mytag type="Big" />

donde tipo es un atributo que se enlaza al componente. de tal manera que establece el texto en una etiqueta, como se muestra a continuación:

<label>{{type}}</label>

... (otros componentes)...

Como dice la documentación, tengo un controlador que establece un tipo predeterminado:

$scope.type = "Small";

de modo que si uso mi etiqueta sin el tipo de atributo todavía se establece.

Estoy intentando hacer un enlace usando una directiva:

angular.module(''TestPage'',[])
      .directive(''mytag'',function() {
          return {
              restrict: ''E'',
              templateUrl: ''component.html'',
              scope: {
                  type: ''=''
              }
          }
      });

Tenga en cuenta que tengo la configuración adecuada de ng-app en mi plantilla de componente (ng-app = "TestPage").

Mi problema es que la vinculación con el tipo no parece en realidad vincular nada.

He leído la documentación sobre cómo vincular una variable a componentes utilizando la directiva. Según la documentación, puede hacer estos enlaces dentro de un ámbito. Aparentemente, los ámbitos pueden contener un "objeto-hash" (¡sea lo que sea!) Que crea algo llamado "alcance aislado" (???). Tales ámbitos pueden representar "propiedades locales" de las siguientes maneras:

@ o @attr: vincula una propiedad de ámbito local al atributo DOM. El resultado es siempre una cadena, ya que los atributos DOM son cadenas. Si no se especifica ningún nombre attr, el nombre local y el atributo son los mismos. Dada y la definición del widget del alcance: {localName: ''@ myAttr''}, entonces la propiedad del alcance del widget localName reflejará el valor interpolado de hello {{name}}. A medida que el atributo de nombre cambie, también lo hará la propiedad localName en el ámbito del widget. El nombre se lee del ámbito principal (no del componente).

Eh ??? ¿Qué tiene todo esto que ver con la sintaxis adecuada para el enlace?

= o = expresión: configure el enlace bidireccional entre una propiedad de ámbito local y la propiedad de ámbito principal. Si no se especifica ningún nombre attr, el nombre local y el atributo son los mismos. Dada y la definición del widget del alcance: {localModel: ''= myAttr''}, entonces la propiedad del alcance del widget localName reflejará el valor de parentModel en el alcance principal. Cualquier cambio en parentModel se reflejará en localModel y cualquier cambio en localModel se reflejará en parentModel.

¿Disculpe? ¿Qué se está diciendo aquí?

& o & attr: proporciona una forma de ejecutar una expresión en el contexto del ámbito principal. Si no se especifica ningún nombre attr, el nombre local y el atributo son los mismos. Dada y la definición del widget del ámbito: {localFn: ''increment ()''}, a continuación, aísle la propiedad del ámbito localFn apuntará a un envoltorio de función para la expresión increment (). A menudo, es deseable pasar los datos del ámbito aislado a través de una expresión y al ámbito primario, esto se puede hacer pasando un mapa de nombres y valores de variables locales a la envoltura de expresión fn. Por ejemplo, si la expresión es incremento (cantidad), entonces podemos especificar el valor de la cantidad llamando a localFn como localFn ({amount: 22}).

Ahora estoy totalmente confundido! ¿Tienes etiquetas de widgets y algún tipo de función relacionada que tengo que escribir en orden para hacer el enlace? ¡Todo lo que quiero es unir un valor a una etiqueta de etiqueta!

He copiado el texto anterior de la documentación ( http://docs.angularjs.org/guide/directive ) para indicar que este documento se lee como la documentación antigua de UNIX: realmente útil para aquellos que ya conocen el sistema, pero No es tan útil para los principiantes que están tratando de desarrollar una experiencia real. Con todos los tutoriales que muestran cómo realizar tareas sencillas en AngularJS (ideal para aplicaciones de juguete pero no tan bueno para el tipo de aplicaciones del lado del cliente que quiero construir), ¿por qué no hay nada para las cosas más avanzadas?

Está bien, es hora de que sea más constructivo.

¿Puede alguien, por favor, proporcionar algunos ejemplos agradables y sencillos de cómo hacer los diversos enlaces que esta documentación está tratando de describir tan difícilmente? ¿Ejemplos que muestran la sintaxis adecuada para estas declaraciones de alcance y descripciones (en inglés simple) de cómo regresan al atributo que se agrega a la etiqueta personalizada?

Gracias por su paciencia y gracias de antemano por cualquier ayuda.

Answer 1

Estás bastante cerca ..

app.directive(''mytag'',function() {
    return {
        restrict: ''E'',
        template: ''<div>'' +
            ''<input ng-model="controltype"/>'' + 
            ''<button ng-click="controlfunc()">Parent Func</button>'' + 
            ''<p>{{controlval}}</p>'' + 
         ''</div>'',
        scope: {
            /* make typeattribute="whatever" bind two-ways (=)
            $scope.whatever from the parent to $scope.controltype
            on this directive''s scope */
            controltype: ''=typeattribute'',
            /* reference a function from the parent through
               funcattribute="somefunc()" and stick it our
               directive''s scope in $scope.controlfunc */
            controlfunc: ''&funcattribute'',
            /* pass a string value into the directive */
            controlval: ''@valattribute''
        },
        controller: function($scope) {                  
        }
    };
});

  <div ng-controller="ParentCtrl">
       <!-- your directive -->
       <mytag typeattribute="parenttype" funcattribute="parentFn()" valattribute="Wee, I''m a value"></mytag>
       <!-- write out your scope value -->
       {{parenttype}}
  </div>


  app.controller(''ParentCtrl'', function($scope){ 
       $scope.parenttype = ''FOO'';
       $scope.parentFn = function() {
           $scope.parenttype += ''!!!!'';
       }
  });

La magia está principalmente en el scope: declaración en su definición de directiva. teniendo cualquier scope: {} allí "aislará" el alcance del padre, lo que significa que tiene su propio alcance ... sin eso, usaría el alcance del padre. El resto de la magia está en las propiedades del scope: { ''internalScopeProperty'' : ''=externalAttributeName'' } : scope: { ''internalScopeProperty'' : ''=externalAttributeName'' } ... donde = representa un escenario de enlace de dos vías. Si cambia ese = a a @ , verá que solo le permite pasar una cadena como un atributo a la directiva. El & es para ejecutar funciones desde el contexto del ámbito principal.

Espero que eso ayude.

EDITAR: Aquí hay un PLNKR de trabajo

Answer 2

También luché un poco con esta documentación cuando llegué a Angular por primera vez, pero intentaré aclarar las cosas para usted. Primero, cuando se usa esta propiedad de scope , crea un "alcance aislado". Todo esto significa que no heredará ninguna propiedad de los ámbitos primarios, por lo que no tiene que preocuparse por ninguna colisión dentro del alcance.

Ahora, la notación ''@'' significa que el valor evaluado en el atributo quedará automáticamente vinculado a su alcance para la directiva. Entonces, <my-directive foo="bar" /> terminaría con el ámbito que tiene una propiedad llamada foo que contiene la cadena "barra". También puedes hacer algo como <my-directive foo="{{bar}}" Y luego el valor evaluado de {{bar}} se vinculará al alcance. Dado que los atributos son siempre cadenas, siempre terminará con una cadena para esta propiedad en el ámbito cuando use esta notación.

La notación ''='' básicamente proporciona un mecanismo para pasar un objeto a su directiva. Siempre extrae esto del ámbito principal de la directiva, por lo que este atributo nunca tendrá el {{}} . Por lo tanto, si tiene <my-directive foo="bar" /> $scope.bar todo lo que esté en $scope.bar en su directiva en la propiedad foo del alcance de su directiva. Cualquier cambio que realice en foo dentro de su alcance se volverá a seleccionar en la bar en el alcance principal y viceversa.

No he usado la notación ''&'' casi tanto como la otra también, así que no lo sé tan bien como esos dos. Por lo que entiendo, le permite evaluar expresiones desde el contexto del ámbito principal. Entonces, si tiene algo como <my-directive foo="doStuff()" /> , siempre que llame a scope.foo () dentro de su directiva, llamará a la función doStuff en el ámbito primario de la directiva. Estoy seguro de que hay mucho más que puedes hacer con esto, pero no estoy tan familiarizado con todo esto. Tal vez alguien más pueda explicar esto con más detalle.

Si solo se establece el símbolo en el alcance, utilizará el mismo nombre que el atributo para enlazar con el alcance de las directivas. Por ejemplo:

scope: {
   foo1: ''@'',
   foo2: ''='',
   foo3: ''&''
}

Al incluir la directiva, debería haber los atributos foo1, foo2 y foo3. Si desea una propiedad en su ámbito diferente al nombre del atributo, puede especificar eso después del símbolo. Entonces, el ejemplo de arriba sería

scope: {
   foo1: ''@bar1'',
   foo2: ''=bar2'',
   foo3: ''&bar3''
}

Al incluir la directiva, debería haber los atributos bar1, bar2 y bar3, y estos se vincularían en el ámbito bajo las propiedades foo1, foo2 y foo3 respectivamente.

Espero que esto ayude. Siéntase libre de hacer preguntas con las que pueda aclarar mi respuesta.