Question

我正在尝试创建一个这样的自定义指令：

app.js

sampleApp
.directive("selectDirective", function() {
    return {
        restrict : "E",
        templateUrl : "directive.html",
        scope: {
            spListField: "=spField",        
            firstOptText: "@",
            selectWidthPx: "@",
            ngModel: "="
        }
    };
});

我将my指令的spListField属性初始化为：

{fieldOptions: results.value, textColumn: 'RoomName', valueColumn: 'RoomNumber'};

其中results.value是作为angular $ http调用的结果获得的。

directive.html

<select     
    ng-model="ngModel" 
    ng-options="fieldOption['{{spListField.valueColumn}}'] 
                as fieldOption['{{spListField.textColumn}}'] 
                for fieldOption 
                in spListField.fieldOptions | unique: '{{spListField.textColumn}}' | orderBy: '{{spListField.textColumn}}' : false  
                track by fieldOption['{{spListField.valueColumn}}']">
    <option value="">{{firstOptText}}</option>

问题是虽然我的模型值从服务中正确显示，但我的视图（由指令呈现的选择）不会更新。我得到了＃34;未定义＆＃34;作为我的选择元素中的选项。奇怪的是，如果我硬编码如下所示的ng-options属性，它就可以工作。

<select class="FilterDDL"
    ng-style="{width: selectWidthPx + 'px'}" 
    ng-model="ngModel" 
    ng-options="fieldOption['RoomNumber'] 
                as fieldOption['RoomName'] 
                for fieldOption 
                in spListField.fieldOptions | unique: '{{spListField.textColumn}}' | orderBy: '{{spListField.textColumn}}' : false  
                track by fieldOption['{{spListField.valueColumn}}']">
    <option value="">{{firstOptText}}</option>

但我不能以这种方式重用我的指令。我做错了什么？

更新

我在服务代码中尝试使用jquery $ .ajax而不是$ http来获取results.value对象，它可以使用我的原始指令HTML。现在我完全糊涂了。

在custom指令中的ng-option标记内使用表达式

0 个答案: