Определить динамический контроллер в директиве AngularJS?

Question

У меня есть директива с динамическим шаблоном, теперь я хочу, чтобы директива имела возможность использовать разные контроллеры. Можно ли динамически назначить контроллер директиве? Если возможно, это будет тот же «ctrlr», который затем передается функции link?

.directive('myDirective',['$compile',function($compile){ 
    return { 
     restrict: 'AE', 
     replace: true, 
     transclude: true, 
     scope: {}, 
     templateUrl: function(el,attrs){ 
      return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default'; 
     }, 
     link : function(scope,el,attrs,ctrlr,transFn){ 
      [... Do Stuff Here ...] 
     }, 
     controller: [ DYNAMIC CONTROLLER ASSIGNMENT?? ] 
    }; 
}]); 

Answer 1

Хотя я не нашел соответствующую документацию для него в официальном API, вы можете динамически передавать имя контроллера, который вы хотите использовать, используя атрибут «name» в сочетании с предоставлением атрибута «controller» со значением, которое использует аналогичный синтаксис, который вы используете для области изоляции.

Использование образцов кода, предполагая контроллер под названием "myController":

HTML:

<my-directive ctrlr="myController"></my-directive> 

JS:

.directive('myDirective',['$compile',function($compile){ 
    return { 
     restrict: 'AE', 
     replace: true, 
     transclude: true, 
     scope: {}, 
     templateUrl: function(el,attrs){ 
      return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default'; 
     }, 
     link : function(scope,el,attrs,ctrlr,transFn){ 
      [... Do Stuff Here ...] 
     }, 
     controller: '@', 
     name: 'ctrlr' 
    }; 
}]); 

Answer 2

Вот как это делается:

Внутри вашей директивы элемента все, что вам нужно, это атрибут, который дает доступ к имени контроллера:

<card-dealer ng-repeat="card in cards" card="card"></card-dealer> 

в моем случае мой card Атрибут содержит объект карты, который имеет имя.

В директиве установить изолята простор:

scope: { card: '=' } 

Это изолирует и интерполировать объект карты в рамках директивы. Затем установите шаблон директивы для:

template: '<div ng-include="getTemplateUrl()"></div>' 

это выглядит на регулятор директивы для функции с именем getTemplateUrl и позволяет установить templateUrl динамически, а также.

В контроллере директивы функция getTemplateUrl выглядит следующим образом:

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

У меня есть MVC контроллер, который связывает соответствующий файл .cshtml и ручки безопасности, когда этот маршрут попал, но это будет работать с регулярный угловой маршрут.

В .cshtml/html файл, который вы создали динамический контроллер просто положить

<div ng-controller="CardContactController"></div>

в качестве корневого элемента. Контроллер будет отличаться для каждого шаблона. Это создает иерархию контроллеров, которая позволяет применять дополнительную логику ко всем картам в целом, а затем конкретную логику для каждой отдельной карты. Мне все еще нужно выяснить, как я буду обрабатывать свои услуги, но этот подход позволяет вам создать динамический шаблонный и динамический контроллер для директивы, используя ng-repeat на основе имени контроллера. Это очень чистый способ выполнения этой функции, и все это самодостаточно.