Angularjs-Pasar argumento a directiva

Puede pasar argumentos a su directiva personalizada como lo hace con las directivas angulares incorporadas, especificando un atributo en el elemento directive:

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

Lo que necesita hacer es definir el scope (incluyendo el argumento(s)/parámetro(s)) en la función factory de su directiva. En el siguiente ejemplo la directiva toma un parámetro title -. A continuación, puede utilizarlo, por ejemplo en el template, utilizando la forma Angular regular: {{title}}

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

Dependiendo de cómo / qué quieres bind, tienes diferentes opciones:

• {[8] } es vinculante de dos vías
• @ simplemente lee el valor (enlace unidireccional)
• & se utiliza para enlazar funciones

En algunos casos es posible que desee usar un nombre "externo" que difiera del nombre "interno". Con external me refiero al nombre del atributo en el elemento directiva y con internal me refiero al nombre de la variable que se utiliza dentro del ámbito de aplicación de la directiva.

Por ejemplo, si miramos por encima de la directiva, es posible que no desee especificar otro atributo adicional para el título, a pesar de que internamente desea trabajar con una propiedad title -. En su lugar, desea usar su directiva de la siguiente manera:

<directive-name="title2"></directive-name>

Esto puede lograrse especificando un nombre detrás de la opción mencionada anteriormente en la definición del ámbito de aplicación:

scope: {
    title: '@directiveName'
}

Por favor, también tenga en cuenta las siguientes cosas:

• La especificación HTML5 dice que los atributos personalizados (esto es básicamente lo que lugar en aplicaciones angulares) debe ser prefijado con data-. Angular soporta esto eliminando el prefijo data--de cualquier atributo. Así que en el ejemplo anterior se podría especificar el atributo en el elemento (data-title="title2") e internamente todo sería el mismo.
• Los atributos en los elementos están siempre en la forma de <div data-my-attribute="..." /> mientras que en el código (por ejemplo, propiedades en el objeto scope) están en la forma de myAttribute. Perdí mucho tiempo antes de darme cuenta de esto.
• Para otro enfoque de intercambiando / compartiendo datos entre diferentes componentes Angulares (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)

Puedes probar como a continuación:

app.directive("directive_name", function(){
return {
    restrict:'E',
    transclude:true,
    template:'<div class="title"><h2>{{title}}</h3></div>',
    scope:{
      accept:"="
    },
    replace:true
  };
})

Establece un enlace bidireccional entre el valor del atributo 'accept' y el ámbito padre.

Y también puede establecer el enlace de datos de dos vías con la propiedad: '= '

Por ejemplo, si desea que tanto la clave como el valor estén vinculados al ámbito local, debe hacer lo siguiente:

  scope:{
    key:'=',
    value:'='
  },

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

Por lo tanto, si desea pasar un argumento del controlador a la directiva, consulte esto a continuación fiddle

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

Espero que ayude..

<button my-directive="push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, elm, attrs) {
                elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

Esto es lo que hice

Estoy usando la directiva como atributo html y pasé el parámetro como sigue en mi archivo HTML. my-directive="push" Y de la directiva lo recuperé del objeto de evento clic con el ratón. event.target.getAttribute('my-directive').