0

我正在构建的 MVC Web 应用程序中有一个重复的自动完成控件。我决定使用 Kendo 的 Angular 自动完成工具——因为我们还使用了他们的日历和下拉列表控件（仅供参考——对于大型列表很方便——因为允许在下拉列表中进行搜索）。我们也在使用 Angular。

我已经从指令中获得了自动完成功能和“自动完成”功能。但是，当您在自动完成中键入或选择一个值时，它不会将模型绑定回父控制器。我不是指令方面的专家，所以如果可以的话，我希望能得到一些帮助！请看这个 plunker，里面有所有东西来复制我的测试！ http://plnkr.co/edit/Zlw75QhmF7xkrLKsQkP8?p=preview

该指令返回：

    return {
        restrict: 'E',
        scope: {
            bindTo: '='
        },
        template: '<input kendo-auto-complete ng-model="vm.bindTo" k-options="vm.fruitAutoComplete" style="width: 100%;"/>',
        controllerAs: 'vm',
        controller: fruitAutocompleteCtrl,
        bindToController: true
    };

在 html 中，我声明了这一点：

<fruit-autocomplete bindTo="vm.selectedFruit"></fruit-autocomplete>

Bascialy，我试图让自动完成指令的值绑定到控制器上的“vm.selectedFruit”变量。非常感谢任何帮助！

提前致谢！

4

1 回答 1

1

好的，我找到了。我在这里叉了你的笨蛋。您应该能够看到代码。如果没有，请告诉我:-)。

首先，使用应该传递数据的指令属性是错误的。在你的 html 中。你写了：

From Directive <fruit-autocomplete bindTo="vm.selectedFruit"></fruit-autocomplete>

但这应该是：

From Directive <fruit-autocomplete bind-to="vm.selectedFruit"></fruit-autocomplete>

在 html 中，指令名称及其属性始终使用破折号。在代码中，它被转换为驼峰式。

然后我还在指令本身中发现了一个错误。你写了：

return {
        restrict: 'E',
        scope: {
            bindTo: '='
        },
        template: '<input kendo-auto-complete ng-model="vm.bindTo" k-options="vm.fruitAutoComplete" style="width: 100%;"/>',
        controllerAs: 'vm',
        controller: fruitAutocompleteCtrl,
        bindToController: true
    };

但是，如果您使用“本地”变量进行范围绑定，我发现会更容易。此外，在模板中，您需要删除“vm”。并将 ng-model 绑定到您的“本地”范围变量，如下所示：

return {
        restrict: 'E',
        scope: {
            data: '=bindTo'
        },
        template: '<input kendo-auto-complete ng-model="data" k-options="vm.fruitAutoComplete" style="width: 100%;"/>',
        controllerAs: 'vm',
        controller: fruitAutocompleteCtrl,
        bindToController: true
    };

看？我将“数据”作为本地范围变量，并用它来绑定它。但是，作为旁注，如果您要使用链接功能，则需要使用点表示法来处理“本地”范围变量：在我的情况下是 scope.data。

希望能帮助到你！

于 2016-01-26T08:46:18.357 回答