Cómo configurar el controlador dynamic para las directivas?

Hablar es barato, primero muestre mis códigos:

HTML:

directiva:

 angular.module('attrDirective',[]).directive('addIcons', function($compile){ return { restrict : 'A', controller : "IconsCtrl" }, link : function (scope, elem , attrs, ctrl) { var parentElem = $(elem); var icons = $compile(")(scope); parentElem.find(".accordion-heading").append(icons); }, } 

});

controlador:

 function IconsCtrl($scope){ $scope.add = function(){ console.log("add"); }; } 

ahora funciona, cuando hago clic en el icono más, la consola del navegador muestra “agregar”.

pero quiero configurar el controlador en la directiva de forma dinámica, así:

HTML:

 

Controlador:

 function IconsOneCtrl($scope){ $scope.add = function(){ console.log("IconsOne add"); }; } function IconsTwoCtrl($scope){ $scope.add = function(){ console.log("IconsTwo add"); } } 

directiva le gusta:

 angular.module('attrDirective',[]).directive('addIcons', function($compile){ return { restrict : 'A', controller : dynamic set,depends on attrs.addIcons }, link : function (scope, elem , attrs, ctrl) { var parentElem = $(elem); var icons = $compile(")(scope); parentElem.find(".accordion-heading").append(icons); }, } }); 

cómo lograr mi objective? ¡gracias por tu respuesta!

Ahora es posible con AngularJS. En la directiva solo agrega dos propiedades nuevas llamadas controller , propiedad de name y también el isolate scope es exactamente necesario aquí.

Importante tener en cuenta en la directiva

 scope:{}, //isolate scope controller : "@", // @ symbol name:"controllerName", // controller names property points to controller. 

Demostración de trabajo para configurar el controlador dynamic para directivas

Marcado HTML:

   

Controlador angular y directiva:

 var app = angular.module('myApp',[]). directive('communicator', function(){ return { restrict : 'E', scope:{}, controller : "@", name:"controllerName", template:"
" } }). controller("PhoneCtrl",function($scope){ $scope.sendMsg = function(){ alert( $scope.message + " : sending message via Phone Ctrl"); } }). controller("LandlineCtrl",function($scope){ $scope.sendMsg = function(){ alert( $scope.message + " : sending message via Land Line Ctrl "); } })

Tu caso, puedes probar esto debajo de los fragmentos de código.

Demo de trabajo

Marcado HTML:

 

Código Angular:

 angular.module('myApp',[]). directive('addIcons', function(){ return { restrict : 'A', scope:{}, controller : "@", name:"controllerName", template:'' } }). controller("IconsOneCtrl",function($scope){ $scope.add = function(){ alert("IconsOne add "); } }). controller("IconsTwoCtrl",function($scope){ $scope.add = function(){ alert("IconsTwo add "); } }); 

Así es como se hace:

Dentro de tu elemento directivo, todo lo que necesitas es un atributo que te dé acceso al nombre del controlador: en mi caso, mi atributo de tarjeta contiene un objeto de tarjeta que tiene una propiedad de nombre. En la directiva, establece el scope aislado en:

 scope: { card: '=' } 

Esto aísla e interpola el objeto de la tarjeta al scope de la directiva. Luego configura la plantilla de directiva para:

template: '' ,

esto busca en el controlador de la directiva una función llamada getTemplateUrl y también le permite configurar la templateUrl dinámicamente. En el controlador de directivas, la función getTemplateUrl ve así:

 controller: ['$scope', '$attrs', function ($scope, $attrs) { $scope.getTemplateUrl = function () { return '/View/Card?cardName=' + $scope.card.name; }; }], 

Tengo un controlador mvc que enlaza el archivo .cshtml adecuado y maneja la seguridad cuando se golpea esta ruta, pero esto también funcionaría con una ruta angular regular. En el archivo .cshtml / html, configura su controlador dynamic simplemente poniendo como elemento raíz. El controlador será diferente para cada plantilla. Esto crea una jerarquía de controladores que le permite aplicar lógica adicional a todas las tarjetas en general, y luego lógica específica a cada tarjeta individual. Todavía tengo que averiguar cómo voy a manejar mis servicios, pero este enfoque le permite crear una plantilla dinámica Controlador dynamic y dynamic para una directiva que usa una repetición ng basada solo en el nombre del controlador. Es una forma muy limpia de lograr esta funcionalidad y es totalmente autónoma.

1- No necesita usar: var parentElem = $(elem); as elem is a jquery element. This is similar to: $($('#myid')) var parentElem = $(elem); as elem is a jquery element. This is similar to: $($('#myid'))

2- no se puede asignar dinámicamente un controlador, porque el controlador de la directiva se crea una instancia antes de la fase de pre enlace.

El controlador de directivas tiene acceso a attrs, por lo que puede elegir dinámicamente qué función interna (funciones dentro de su controlador) de acuerdo con el valor de sus attrs['addIcons']

PD. note attrs['addIcons'] es el nombre de camello.