Mam kilka opcji wielokrotnego wyboru na stronie, każda z odrobiną logiki, która wypełnia ten wybór z serwera, i chcę zawinąć każdą z nich w dyrektywę.

Zanim spróbowałem zawrzeć je w dyrektywach, zbudowałem je jako takie:

index.html

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

controllers.js

W pierwszym przejściu robię moje $ http połączenia stąd. Tak, wiem, nie najlepsze praktyki, ale chciałem udowodnić, że to działa na początku.

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

Teraz chcę przenieść to do dyrektywy. Widzę dwa główne wyzwania: 1.) Jak zamknąć cały zestaw opcji (np. Jaki jest teraz model „allgroups”) w dyrektywie? 2.) Na podstawie wstępnych eksperymentów próbowałem fizycznie zbudować<select/> do szablonu, ale zdałem sobie sprawę, że muszę manipulować DOMem, aby fizycznie zastąpić nazwę, ng-model i ng-options. To doprowadziło mnie do atrybutu kompilacji, ale.), Który wydaje się niewłaściwy i b.) Ustawienie<select ng-options="x for x in allgroups" /> nie powtarza się po włożeniu do DOM. Używanie kompilacji nie jest właściwe; jaki jest właściwy sposób podejścia do tego?

Oto moja pierwsza próba dyrektywy wygląda tak. To tak naprawdę nie działa i myślę, że źle to rozumiem:

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">' +
                '<select ng-model="{{ngModel}}" ng-options="x for x in {{alloptionsModel}}" multiple class="form-control"></select>' +
              '</div>' +
           '</fieldset>' +
        '</div>',

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

Najwyraźniej jeszcze nie dotarłem jeszcze do części ładowania serwera, ale planuję zamienić ją w kontroler w Dyrektywie, z rzeczywistym wywołaniem $ http w usłudze.

Czuję, że idę w złym kierunku. Jeśli masz sugestie dotyczące wyrównywania, pomóż!