Angularjs – Pasar argumento a la directiva

Este enunciado ha sido aprobado por especialistas así aseguramos la exactitud de nuestro tutorial.

Solución:

Puede pasar argumentos a su directiva personalizada como lo hace con las directivas angulares integradas, especificando un attribute en el elemento de directiva:

angular.element(document.getElementById('wrapper'))
       .append('');

Lo que tienes que hacer es definir el scope (incluidos los argumentos/parámetros) en la función de fábrica de su directiva. En el siguiente ejemplo, la directiva toma un title-parámetro. A continuación, puede utilizarlo, por ejemplo, en el template, usando la forma Angular regular: title

app.directive('directiveName', function()
   return 
      restrict:'E',
      scope: 
         title: '@'
      ,
      template:'
title
'
   ;
);

Dependiendo de cómo/qué quieras vincular, tienes diferentes opciones:

• = es un enlace bidireccional
• @ simplemente lee el valor (enlace unidireccional)
• & se utiliza para enlazar funciones

En algunos casos, es posible que desee utilizar un nombre “externo” que difiera del nombre “interno”. Con externo me refiero al attribute nombre en el elemento de directiva y con interno me refiero al nombre de la variable que se usa dentro del alcance de la directiva.

Por ejemplo, si observamos la directiva anterior, es posible que no desee especificar otro, adicional attribute para el título, aunque internamente quieras trabajar con un title-propiedad. En su lugar, desea utilizar su directiva de la siguiente manera:

Esto se puede lograr especificando un nombre detrás de la opción mencionada anteriormente en la definición del alcance:

scope: 
    title: '@directiveName'

Tenga en cuenta también lo siguiente:

• La especificación HTML5 dice que custom attributes (esto es básicamente lo que está por todas partes en las aplicaciones Angular) debe tener el prefijo data-. Angular apoya esto al quitar el data--prefix de cualquiera attributes. Entonces, en el ejemplo anterior, podría especificar el attribute en el elemento (data-title="title2") e internamente todo sería igual.
• Los atributos de los elementos siempre tienen la forma de
  mientras que en el código (por ejemplo, propiedades en el objeto de alcance) están en forma de myAttribute. Perdí mucho tiempo antes de darme cuenta de esto.
• Para otro enfoque para intercambiar/compartir datos entre diferentes componentes de Angular (controladores, directivas), es posible que desee echar un vistazo a los servicios o controladores de directivas.
• Puede encontrar más información en la página de inicio de Angular (directivas)

Así es como resolví mi problema:

Directiva

app.directive("directive_name", function()
    return 
        restrict: 'E',
        transclude: true,
        template: function(elem, attr)
           return '
'+attr.scope+'
';
        ,
        replace: true
    ;
)

Controlador

$scope.building = function(data)
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  

Ahora puedo usar diferentes ámbitos a través de la misma directiva y agregarlos dinámicamente.

Puedes probar como a continuación:

app.directive("directive_name", function()
return 
    restrict:'E',
    transclude:true,
    template:'
title
',
    scope:
      accept:"="
    ,
    replace:true
  ;
)

establece un enlace bidireccional entre el valor de ‘aceptar’ attribute y el ámbito principal.

Y también puede establecer un enlace de datos bidireccional con la propiedad: ‘=’

Por ejemplo, si quieres ambos key y valor vinculado al ámbito local que haría:

  scope:
    key:'=',
    value:'='
  ,

Para obtener más información, https://docs.angularjs.org/guide/directive

Entonces, si desea pasar un argumento del controlador a la directiva, consulte esto a continuación.

http://jsfiddle.net/jaimem/y85Ft/7/

Espero eso ayude..

Te mostramos las reseñas y valoraciones de los usuarios

Puedes animar nuestra investigación fijando un comentario y dejando una puntuación te lo agradecemos.

Utiliza Nuestro Buscador