Угловая директива - Dynamic Controller

Question

Мне поручено создать набор «карт», как на Google, на одном и других подобных сайтах, используя AngularJS для панели инструментов. Каждая карта имеет независимую функциональность от остальных, и все они должны появиться, как только их данные будут возвращены из API. В будущем мы собираемся разрешить привязку этих карт к панели управления, а также заказ, который будет настроен пользователем.

Я создал директиву «card-dealer», которая будет содержать ng-repeat для каждой карты в массиве объектов карты. Каждая из этих карт должна иметь свой собственный динамический шаблон и контроллер, в котором я столкнулся с проблемой. Мне удалось выяснить, как пройти динамический templateUrl, но контроллер - это совсем другая история. Я все, но получил он понял, имитируя, что я смотрел на Pluralsight видео, я просто должен быть в состоянии передать card.controller переменные в директиве «Ctrl» атрибут, как это:

<card-dealer ng-repeat="card in cards" card="card" ctrl="{{card.controller}}"/> 

Однако переменная ctrl='{{card.controller}}' в директиве не анализируется до того, как она будет отправлена ​​в директиву. В директиве я устанавливаю контроллер динамически, устанавливая controller: '@' и name: 'ctrl'. Это рассматривается в элементе для атрибута с именем «ctrl» и возвращает его значение как имя контроллера. Этот метод работает, когда я ввожу имя строки директивного контроллера вместо использования переменной {{card.controller}}, но просто ввод строки не является динамическим.

Мне нужна переменная, которую нужно разобрать до того, как она достигнет директивы, чтобы она искала правильное имя контроллера. Я создал скрипт JS, чтобы продемонстрировать свою проблему: http://jsfiddle.net/kPdCk/. Это должно возвращать два окна оповещения, по одному из каждого контроллера. Если вы запустите это сейчас, вы увидите в журнале консоли, что он пытается найти контроллер с именем переменной вместо значения переменной.

Пожалуйста, помогите! Это важно для будущего всей нашей панели инструментов, как только мы выясним, как передать имя динамического контроллера, мы будем золотыми. Заранее спасибо!!!

Answer 1

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

---

Внутри вашей директивы все, что вам нужно, это атрибут, который дает доступ к имени карты: <card-dealer ng-repeat="card in cards" card="card"> </card-dealer> в моем случае мой атрибут карта содержит объект карты, который имеет свойство name. В директиве вы устанавливаете область изоляции для: scope: { card: '=' } Это изолирует и интерполирует объект карты на область действия директивы. Затем вы устанавливаете шаблон директивы: template: '<div ng-include="getTemplateUrl()"></div>', это смотрит на контроллер директивы для функции с именем getTemplateUrl. Это то, что вы хотите, потому что директивный контроллер имеет доступ к объекту области видимости. В контроллере директивы функция getTemplateUrl выглядит следующим образом: controller: ['$scope', '$attrs', function ($scope, $attrs) { $scope.getTemplateUrl = function() { return '/View/Card?cardName=' + $scope.card.name; }; }],

---

У меня есть MVC контроллер, который связывает соответствующий файл .cshtml и ручки безопасности, когда этот маршрут попал, но это будет работать с обычным угловым маршрутом также. В файле .cshtml вы настроите свой динамический контроллер, просто вставив <div ng-controller="CardContactController"></div> в качестве корневого элемента. Контроллер будет отличаться для каждой карты. Это создает иерархию контроллеров, которая позволяет применять дополнительную логику ко всем картам в целом, а затем конкретную логику для каждой отдельной карты. Мне все еще нужно выяснить, как я буду обрабатывать свои услуги, но этот подход позволяет вам создать динамический шаблонный контроллер и динамический контроллер для директивы с использованием ng-repeat, основанного только на имени карты. Это очень чистый способ выполнения этой функции, и все это самодостаточно.