angularjs - directives - directive controller angular

Angularjs-Pase el argumento a la directiva

Question

Me pregunto si hay una manera de pasar un argumento a una directiva.

Lo que quiero hacer es agregar una directiva del controlador como esta:

$scope.title = "title";
$scope.title2 = "title2";
angular.element(document.getElementById(''wrapper'')).append(''<directive_name></directive_name>'');

¿Es posible pasar un argumento al mismo tiempo para que el contenido de mi plantilla de directiva pueda vincularse a un alcance u otro?

Aquí está la directiva:

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

¿Qué sucede si quiero usar la misma directiva pero con $ scope.title2?

Answer 1

Código del controlador

myApp.controller(''mainController'', [''$scope'', ''$log'', function($scope, $log) {
$scope.person = {
name:"sangeetha PH",
address:"first Block"
}
}]);

Código de directiva

myApp.directive(''searchResult'',function(){
return{
restrict:''AECM'',
templateUrl:''directives/search.html'',
replace: true,
scope:{
personName:"@",
personAddress:"@"
}
}
});

USO

Archivo: directives / search.html
contenido:

<h1>{{personName}} </h1>
<h2>{{personAddress}}</h2>

el archivo donde usamos la directiva

<search-result person-name="{{person.name}}" person-address="{{person.address}}"></search-result>

Answer 2

Así es como resolví mi problema:

Directiva

app.directive("directive_name", function(){
return {
restrict: ''E'',
transclude: true,
template: function(elem, attr){
return ''<div><h2>{{''+attr.scope+''}}</h2></div>'';
},
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.

Answer 3

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

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

Lo que debe 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. Luego puede usarlo, por ejemplo en la template , usando 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é desea vincular, tiene diferentes opciones:

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

En algunos casos, es posible que desee utilizar un nombre "externo" que difiere del nombre "interno". Con externo me refiero al nombre del atributo en el elemento directivo y con interno me refiero al nombre de la variable que se utiliza dentro del alcance de la directiva.

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

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

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 las siguientes cosas:

• La especificación HTML5 dice que los atributos personalizados (esto es básicamente lo que está por todas partes en las aplicaciones angulares) deben tener como prefijo data- . Angular admite esto eliminando el prefijo de data- de cualquier atributo. Entonces, en el ejemplo anterior, podría especificar el atributo en el elemento ( data-title="title2" ) e internamente todo sería igual.
• Los atributos en los elementos siempre tienen la forma de <div data-my-attribute="..." /> mientras que en el código (por ejemplo, propiedades en el objeto de alcance) tienen la forma de myAttribute . Perdí mucho tiempo antes de darme cuenta de esto.
• Para otro enfoque para intercambiar / compartir datos entre diferentes componentes angulares (controladores, directivas), es posible que desee ver los servicios o controladores de directivas.
• Puede encontrar más información en la página principal de Angular (directivas)

Answer 4

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 ''aceptar'' y el ámbito principal.

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

Por ejemplo, si desea que la clave y el valor estén vinculados al ámbito local, debería hacer lo siguiente:

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

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

Entonces, si desea pasar un argumento del controlador a la directiva, consulte este violín a continuación

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

Espero eso ayude..

Answer 5

<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''));
});
}
};
});

Aquí esta lo que hice

Estoy usando la directiva como atributo html y pasé el parámetro de la siguiente manera en mi archivo HTML. my-directive="push" Y de la directiva lo recuperé del objeto de evento Mouse-click. event.target.getAttribute(''my-directive'') .