AngularJS passing scope through ng-include to x-kendo-template

201 Views Asked by At

I have created a custom template for my Kendo-ui multi-select element.

HTML:

<select kendo-multi-select k-options="vm.selectOptions" k-data-value-field="'id'" k-data-text-field="'name'" k-value-primitive="true" k-data-source="vm.people" k-ng-model="vm.selectedPeople" ></select>

Controller code to set Options:

this.selectOptions = {
    autoClose: false,
    tagMode: "single",
    tagTemplate: $("#_customKendoMultiSelectTemplate").html()
};

Then I "include" the template in my application_layout.html:

<script id="_customKendoMultiSelectTemplate" type="text/x-kendo-template">

    # if (dataItems.length == 1) { #
    # for (var idx = 0; idx < dataItems.length; idx++) { #
    #:dataItems[idx].name#
    # } #
    # } else { #
    #:dataItems.length# ITEMS SELECTED
    # } #

</script>   

This works 100%, what I want to do is move this template into its own file, which I have done but then angular doesn't know what "dataItems" is and renders the entire contents of the template. So how do I pass through the scope? I have tried a couple things with onload method and ng-init but haven't been successful.

<script id="_customKendoMultiSelectTemplate" type="text/x-kendo-template">
    <ng-include src="'/customKendoMultiSelectTemplate.html'" ></ng-include>
</script>   
0

There are 0 best solutions below