如何将k-ng-model初始化为Kendo模板？

Question

I use kendo UI with AngularJS.

I tried something like this in the html directly:

 <div id="item-settings">
    <label>BACKGROUND:</label><div style="display: block" id="colorPalette1" kendo-color-palette k-ng-model="colorPaletteData" k-opacity="true"></div>
</div>

and somthing like this in my angular controller:

 $scope.$watch('colorPaletteData', function (newValue, oldValue) {
        changeColor(newValue);
    })

It work's fine.

But I would like to add the html stuff not directly to the html but with javascript like this:

   $("#item-settings").kendoToolBar({
            resizable: false,
            items: [

                { template: '<label>BACKGROUND:</label><div style="display: block"  id="colorPalette1" kendo-color-palette k-ng-model="colorPaletteData" k-opacity="true"></div>' },

            ]
        });


    $("#colorPalette1").kendoColorPalette({
            palette: "basic",
            value: "#ffffff"

        });

But now the $scope.$watch() function doesn't watch the k-ng-model="colorPaletteData"

How can I fix this?

Answer 1

You should not initialize the widget using jQuery, and you need to use the Kendo UI Directives. As currently the template is not evaluated against the scope.