我在一个页面上有几个多重选择，每个都有一些逻辑来填充来自服务器的多重选择，我想将每个都包装到一个指令中。
在尝试将它们包装到指令中之前，我按如下方式构建了每个指令：
索引.html
<select name="groups" ng-model="inputs.groups" ng-change="groupsChanged()" ng-options="g for g in allgroups" multiple></select>
控制器.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 来物理替换名称、ng-model 和 ng-options。这让我找到了编译属性，但是 a.) 感觉不对，b.) 设置<select ng-options="x for x in allgroups" />插入到 DOM 后实际上并不重复。使用编译感觉不对；解决这个问题的正确方法是什么？
这是我对该指令的第一次尝试，如下所示。它实际上不起作用，而且我认为我的做法是错误的：
索引.html
<dimension ng-model="inputs.users" alloptions-model="allusers">Users</dimension>
指令.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
};
});
显然，我什至还没有到达服务器加载部分，但我计划将其滚动到指令中的控制器中，并在服务中进行实际的 $http 调用。
我觉得我正在走错路。如果您对如何重新调整有建议，请帮忙！
