Ich habe mehrere Mehrfachauswahlmöglichkeiten auf einer Seite, von denen jede ein bisschen Logik enthält, die diese Mehrfachauswahl vom Server ausfüllt, und ich möchte jede in eine Direktive einschließen.

Bevor ich versuchte, diese in Direktiven umzuwandeln, baute ich jede als solche:

index.html

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

controller.js

Im ersten Durchgang erledige ich von hier aus meine $ http-Anrufe. Ja, ich weiß, keine Best Practices, aber ich wollte zunächst beweisen, dass dies für mich funktioniert.

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

Jetzt möchte ich dies zu einer Richtlinie migrieren. Ich sehe zwei Hauptherausforderungen: 1.) Wie kann ich den gesamten Optionssatz (z. B. das derzeitige "Allgroups" -Modell) in die Richtlinie einbinden? 2.) Basierend auf ersten Experimenten habe ich versucht, das physikalisch aufzubauen<select/> in die Vorlage ein, erkannte aber, dass ich das DOM manipulieren muss, um die Optionen name, ng-model und ng-options physisch zu ersetzen. Das hat mich zum compile Attribut geführt, aber a.) Das fühlt sich falsch an und b.) Setzen<select ng-options="x for x in allgroups" /> wird nach dem Einfügen in das DOM nicht wiederholt. Die Verwendung von compile fühlt sich nicht richtig an. Wie kann man das richtig angehen?

Hier sieht mein erster Versuch mit der Richtlinie so aus. Es funktioniert nicht wirklich und ich denke, ich gehe falsch vor:

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

Natürlich habe ich noch nicht einmal den Serverlast-Teil erreicht, aber ich plane, diesen Teil in einen Controller in der Direktive zu integrieren, mit dem tatsächlichen $ http-Aufruf in einem Service.

Ich habe das Gefühl, auf dem falschen Weg zu sein. Wenn Sie Vorschläge zur Neuausrichtung haben, helfen Sie bitte!