Question

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

我已经完成了自动完成工作，并且自动完成了＃34;从指令。但是，在自动填充中键入或选择值时，它不会将模型绑定回父控制器。我不是指令的专家所以如果可以，我会很乐意帮助你！请看这个包含所有内容的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，我试图将autocomplete指令的值绑定到＆＃34; vm.selectedFruit＆＃34;控制器上的变量。任何帮助都非常感谢！

提前致谢！

Answer 1

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

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

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

但应该是：

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

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

然后我也发现指令本身有错误。你写道：

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绑定到“本地”范围变量，如下所示：

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'作为我的本地范围变量，并使用它来绑定它。但是，如果您要使用链接函数，则需要使用点表示法来处理“本地”范围变量：在我的情况下使用scope.data。

希望它有所帮助！

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

1 个答案: