使用动态ng-options创建指令

Question

好的，下面是我的自定义指令：

angular.module('bulwarkWebControls', [])
.directive('dropdownList', [
    function() {
        return {
            scope: {
                label: '@', // optional
                changeCallback: '&',
                options: '=',
                required: "=",
                disabled: "=",
                id: "=",
                name: "=",
                model: "=",
                value: "=",
                display: "="
            },
            restrict: 'E',
            replace: true, // optional 
            templateUrl: 'app/templates/dropDownList.html',
            link: {
                pre: function (scope, element, attr) {
                     scope.expression = "o."+value +" as o."+display+" for o in options";
                }

            }
        };
    }
]);

模板：

<div class="row form-group form-horizontal">
<label data-for="id" class="control-label col-md-3">{{label}}</label>
<div class="col-md-9">
    <select data-id="id" data-name="name" data-ng-disabled="disabled" class="form-control"
            data-ng-model="model"
            data-ng-options="{{expression}}" data-ng-required="required">
        <option></option>
    </select>
</div>

​

使用该指令的Html代码：

            <div>
            <dropdown-list data-label="Phone(s)" data-id="phoneList" data-name="phoneList"
                           data-disabled="vm.workOrder.Contacted"
                           data-model="vm.workOrder.PhoneNumber_Id" data-value="Id" data-display="Number"
                           data-options="vm.workOrder.CustomerPhoneNumbers" data-required="vm.workOrder.SpokeTo_Id!=5" />
        </div>

我尝试做的基本上是基于传递给指令的"display“和"value”参数，在运行时动态创建ng-options的表达式。您可以在指令中的"pre:“链接函数中看到这一点。现在，我知道这不起作用，因为在执行此函数时，我没有作用域值。但是，我不能在post: linking中做到这一点，因为对于ng-options表达式来说太晚了。有没有办法实现这个功能，或者我在这里完全找错了方向？非常感谢你提前这么做。

Answer 1

不要紧。我在模板中使用了以下代码：

<div class="row form-group form-horizontal">
<label data-for="id" class="control-label col-md-3">{{label}}</label>
<div class="col-md-9">
    <select data-id="id" data-name="name" data-ng-disabled="disabled" class="form-control"
            data-ng-model="model"
            data-ng-options="o.{{value}} as o.{{display}} for o in options" data-ng-required="required" compile>
        <option></option>
    </select>
</div>

​

然后，我采用了我最初放在指令中的pre: linking函数中的任何代码。