Question

我有这个指令

angular.module('xxx', [
])
    .directive('qnDropdown', [
        '$parse',
        function($parse) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elem, attr, ngModel) {
                    scope.$watch(attr.qnDropdown, function(source) {
                        var model = $parse(attr.ngModel);

                        elem.kendoDropDownList({
                            dataTextField: "Name",
                            dataValueField: "ID",
                            value: attr.value,
                            select: function(e) {
                                var item = this.dataItem(e.item.index());
                                scope.$apply(function() {
                                    model.assign(scope, item.value);
                                });
                            },
                            //template: '<strong>${ data.Name }</strong><p>${ data.ID }</p>',
                            dataSource: source
                        });

                    });
                }
            };
        }]);

输入字段是

<input qn:dropdown="locations" ng:model="installation.LocationID" value="{{installation.LocationID}}" />

EVerything工作正常，但未填充kendoDropDownList的初始值（值：attr.value）。我想我在错误的地方或时间做某事但不确定是什么？

Answer 1

您可能需要使用$observe：

使用$observe观察包含插值的属性的值更改（例如src="{{bar}}"）。这不仅非常有效，而且它也是轻松获得实际值的唯一方法，因为在链接阶段，插值尚未进行评估，因此此时的值设置为未定义。 - docs，请参阅属性部分。

这是an example我最近使用$ observe的地方。另见@ asgoth的答案，他使用$ watch，但他也创建了一个隔离范围。

我还不清楚何时需要使用$ observe vs我们何时可以使用$ watch。

Answer 2

您确定{{installation.LocationID}}有您期望的价值吗？我能够通过一些调整来复制粘贴你的代码以适应我的情况而且下拉列表运行得非常好（感谢你为我付出了辛苦的工作！）。我在输入字段上填充value，当指令执行时，attr.value有它，而Kendo按预期显示它。也许这是几个版本以前的Angular问题？

Answer 3

我遇到了同样的问题，attr.value是空的。问题与用于获取数据的$ http异步调用有关。在指令中定义下拉列表时，尚未填充范围数据。

我通过在指令的link函数中查看attr.ngModel而不是attr.qnDropdown来修复此问题。这样，在填充范围数据时就会定义下拉列表。

Angularjs + kendoui下拉列表

3 个答案: