Angularjs 指令与<；选择ng选项>；和间接

我在一个页面上有几个multi-select，每个页面都有一点逻辑来填充服务器上的multi-select，我想把每个页面都包装成一个指令

在尝试将它们包装成指令之前，我构建了每个指令：

index.html

现在我想把它迁移到一个指令。我看到两大挑战： 1.）如何将整套选项（例如，现在的“allgroups”模型）封装到指令中？ 2.）基于最初的实验，我尝试将

物理构建到模板中，但意识到我必须操作DOM来物理替换名称、ng模型和ng选项。这让我找到了compile属性，但是a.）感觉不对，b.）将

插入DOM后，设置实际上不会重复。使用compile感觉不对；正确的方法是什么

这是我第一次尝试这样的指令。这真的不起作用，我想我做得不对：

index.html

用户

指令.js

指令（'dimension'，函数（）{ 返回{ 限制：'E'， 范围：{ ngModel:“=”， alloptionsModel:“=” }, 模板： '' + '' + '' + '' + '' + '' + '' + '', 替换：正确， 转移：对 }; }); 显然，我甚至还没有谈到服务器加载部分，但我计划在指令中把它放到控制器中，在服务中使用实际的$http调用

---

我觉得我走错了方向。如果您对如何重新对齐有任何建议，请帮助

您的指令的主要问题是，您不能在

ngModel

和

ngOptions

指令中使用胡须绑定，因为它们是直接评估的。您可以直接绑定到作用域属性（ngModel和AlloptionModel）：

---

我已经用编译函数更新了。

这是卢卡斯·鲁贝尔克的一段很棒的短片，可能会对您有所帮助。这非常有帮助，谢谢。我试图避免使用compile，因为我在某个地方读到（现在找不到）一条评论，指出compile不应该经常使用。关于如何使AlloptionModel完全在指令范围内，这样就不需要在指令范围外可见，有什么想法吗？

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

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

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

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

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

compile: function(tElement, tAttrs) {
  var select = tElement.find('select'),
      value = tAttrs.value ? 'x.' + tAttrs.value : 'x',
      label = tAttrs.label ? 'x.' + tAttrs.label : 'x',
      ngOptions = value + ' as ' + label + ' for x in alloptionsModel';

      select.attr('ng-options', ngOptions);
}

// In the HTML file
<dimension ng-model="inputs.users" 
           alloptions-model="allusers"
           label="name">
  Users
</dimension>