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：”链接函数中看到它。现在，我知道这不起作用，因为在执行此函数时我没有范围值。但是，我不能在帖子中这样做：链接因为对于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：links函数中的代码放在指令里面。

使用动态ng-options创建指令

1 个答案: