Javascript 如何从select元素上的指令访问选定选项的显示值

我的标记看起来像这样

<select ng-model="search.parameters.selectedOptionId" ng-options="lookup.id as lookup.lookupValue for lookup in lookups.options" custom-attribute-directive>
    <option value="" selected>All</option>
</select>

var id = ngModel.$modelValue;

var filtered = scope.lookupList.filter(function (lookup) { return lookup[scope.comparitorKey.id] == id });
return filtered.length > 0 ? filtered[0][scope.comparitorKey.lookupValue] : null;

---

从customAttributeDirective，我需要访问下拉列表中显示的选定选项值，即lookup.lookupValue。我尝试在ngModel上访问$viewValue，但它被设置为lookup.id，我认为这是ng选项设置方式的错误。我无法修改标记的实现，因为我正在实现该指令所针对的环境，所以必须在那里解决问题

为显示绑定lookup.lookupValue，也为后端Id绑定lookup.lookupValue。在这种情况下，您将使用ng模型获得显示文本

<select ng-model="search.parameters.selectedOptionId" ng-options="lookup.lookupValue as lookup.lookupValue for lookup in lookups.options" custom-attribute-directive>
<option value="" selected>All</option>

---

找到了我的答案。事实证明，指令可以直接访问dom

link: function (scope, element, attrs, controller) {
    scope.getViewValue = function () {
                    if (angular.isDefined(scope.overrideTagDisplay)) {
                        return scope.overrideTagDisplay;
                    }
                    else if (element[0].nodeName == "SELECT") {
                        return element.children()[element[0].selectedIndex].text;
                    }
                    else {
                        return ngModel.$viewValue;
                    }
    }

    scope.initialize()
}

编辑：我后来发现这个方法有一个问题，如果javascript在代码中的其他地方修改了模型值，然后这段代码立即运行，它不会获取新值，因为DOM没有更新这包括页面加载和初始设置。我最终也将查找列表传递到了指令中，并通过使用一个可选的比较器键（默认情况下类似于

var comparitorKey = { id: "id", lookupValue: "lookupValue"};

然后像这样使用

<select ng-model="search.parameters.selectedOptionId" ng-options="lookup.id as lookup.lookupValue for lookup in lookups.options" custom-attribute-directive>
    <option value="" selected>All</option>
</select>

var id = ngModel.$modelValue;

var filtered = scope.lookupList.filter(function (lookup) { return lookup[scope.comparitorKey.id] == id });
return filtered.length > 0 ? filtered[0][scope.comparitorKey.lookupValue] : null;

这个想法是有人可以通过另一个选择，比如

var comparitorKey = {id: "userId", lookupValue: "userName" };

---

ng model search.parameters.selectedOptionId将具有选定的值它将仅具有选定的id。我需要从指令中提取显示的查找值。更新以使问题更具体据我所知，在NgoptionController和SelectController的源代码中，无法通过控制器之间的通信获取选项的源代码。所以你可以通过同样的检查。您的方向选项保持不太硬编码，然后根据NgModelControllert的值筛选列表问题是，我还需要输入要比较的值。我们的一些下拉列表使用id/lookupValue，一些使用UserId/UserName，等等。如果我还必须通过将参数名传递给潜在值，那么它会很快爆炸。我最终找到了一种方法，通过遍历提供给directives的元素，正如我在最初的问题中所说的，由于我执行该指令所针对的环境，不能对该标记进行任何更改，这肯定包括更改id属性的行为。哦，然后，您需要存储数组或绑定到下拉列表的任何数据，然后在下拉列表项更改时获取所选项ID，然后从数组中逐个ID查找该项。我也不能这样做，因为在不同的页面上，选项的定义各不相同，指令必须在唯一已知的公共因素是它位于选择元素上并且显示某些项目的任何地方工作。我找到了我正在寻找的答案并发布了它，但是谢谢你的帮助。