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

Question

I have a repeating Autocomplete control througout an MVC web app I am building. I decided to use Kendo's Angular Autocomplete tool - because we also use their calendar and dropdownlist controls (FYI - handy for large lists - as allows a search within the dropdown). And we are also using Angular.

I have got the Autocomplete working and "auto-completing" from a directive. However, when you type or select a value in the autocomplete, it is not binding the model back to the parent controller. Im not an expert on directives so I would love some help if you can! Please see this plunker which has everything in it to replicate my test! http://plnkr.co/edit/Zlw75QhmF7xkrLKsQkP8?p=preview

The directive returns this:

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

And on the html I declare this:

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

Bascialy, I am trying to get the value of the autocomplete directive to bind to the "vm.selectedFruit" variable on the controller. Any help is really appreciated!

Thanks in advance!

Answer 1

Ok, i found it. I forked your plunk here. You should be able to see the code. If not, let me know :-).

First, the use of the directive attribute that should pass your data is wrong. In your html. You wrote:

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

but that should be:

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

In the html, directive names and their attributes always use dashes. In the code, it gets transformed to camelcase.

Then I also found an error in the directive itself. You wrote:

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

However, I find it easier if you use a 'local' variable for your scope binding. Also, in the template, you need to drop the 'vm.' and just bind ng-model to your 'local' scope variable, like this:

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

See? I made 'data' my local scope variable, and used that to bind it. As a sidenote however, if you would use a link function, you need to address your 'local' scope variable with dot notation: scope.data in my case.

Hope it helps!