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

Прежде чем пытаться заключить их в директивы, я построил каждый из них так:

index.html

<select name="groups" ng-model="inputs.groups" ng-change="groupsChanged()" ng-options="g for g in allgroups" multiple></select>

controllers.js

На первом проходе я делаю мои $ http звонки отсюда. Да, я знаю, не лучшие практики, но я хотел доказать, что это работает в первую очередь для меня.

  $scope.loadSelect = function(_url) {
    $http({
      url: _url,
      method: 'POST',
      data: $scope.inputs,
      model: 'all' + _url
    }).success(function(data, status, headers, config) {
      $scope[config.model] = data;
    });
  };

  // Fill groups
  $scope.loadSelect('groups');

  // When groups change, reload other select fields that depend on groups
  $scope.groupsChanged = function() {
    $scope.loadSelect('categories');
    $scope.loadSelect('actions');
  }

Теперь я хочу перенести это в Директиву. Я вижу две основные проблемы: 1.) Как я могу инкапсулировать весь набор опций (например, что сейчас является моделью "allgroups") в Директиву? 2.) Исходя из первоначальных экспериментов, я попытался физически построить<select/> в шаблон, но понял, что мне нужно манипулировать DOM, чтобы физически заменить name, ng-model и ng-options. Это привело меня к атрибуту компиляции, но а.), Который чувствует себя неправильно и б.) Установка<select ng-options="x for x in allgroups" /> фактически не повторяется после того, как он был вставлен в DOM. Использование компиляции не кажется правильным; Как правильно подойти к этому?

Вот моя первая попытка Директивы выглядит следующим образом. Это на самом деле не работает, и я думаю, что я делаю это неправильно:

index.html

<dimension ng-model="inputs.users" alloptions-model="allusers">Users</dimension>

directives.js

directive('dimension', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
      alloptionsModel: '='
    },
    template:
        '<div>' + 
          '<label ng-transclude></label>' +
          '<fieldset>' +
              '<div class="form-group">' +
                '&l,t;select ng-model="{{ngModel}}" ng-options="x for x in {{alloptionsModel}}" multiple class="form-control"></select>' +
              '</div>' +
           '</fieldset>' +
        '</div>',

    replace: true,
    transclude: true
  };
});

Ясно, что я даже не дошел до части загрузки сервера, но я планирую свернуть это в контроллер в Директиве с фактическим вызовом $ http в службе.

Я чувствую, что двигаюсь по неправильному пути. Если у вас есть предложения по перестройке, пожалуйста, помогите!