Angular Kendo 自动完成的 Js 指令 - 不会将结果绑定到父控制器

Question

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

我已经让自动完成功能正常工作，并且 "auto-completing" 来自一个指令。但是，当您在自动完成中键入或 select 一个值时，它不会将模型绑定回父控制器。我不是指令方面的专家，所以如果可以的话，我希望能得到一些帮助！请查看这个 plunker，其中包含复制我的测试的所有内容！ http://plnkr.co/edit/Zlw75QhmF7xkrLKsQkP8?p=preview

指令returns这个：

    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>

基本上，我正在尝试获取自动完成指令的值以绑定到控制器上的 "vm.selectedFruit" 变量。非常感谢任何帮助！

提前致谢！

Answer 1

好的，我找到了。我分叉了你的 plunk here。您应该能够看到代码。如果没有，请告诉我:-)。

首先，应该传递数据的指令属性的使用是错误的。在你的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
    };

但是，我发现如果您将 'local' 变量用于范围绑定会更容易。此外，在模板中，您需要删除 'vm.' 并将 ng-model 绑定到您的 'local' 范围变量，如下所示：

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
    };

看到了吗？我将 'data' 设置为我的本地范围变量，并使用它来绑定它。但是，作为旁注，如果您要使用 link 函数，则需要使用点符号来处理 'local' 范围变量：在我的例子中为 scope.data。

希望对您有所帮助！

Angular Kendo 自动完成的 Js 指令 - 不会将结果绑定到父控制器

Angular Js directive for Kendo Autocomplete - wont bind result to parent controller

kendo-ui

angularjs

angularjs-directive

kendo-autocomplete