Kendo-ui angular directive on editor

Question

I'm trying to attach an angular directive to `

 {
   field:"stateID", 
   hidden: true,
   title: "State",
   editor: function (container, options) {
   var _statesDirective = $('<div><my-states></my-states></div>');
  _statesDirective.appendTo(container);
}`

My diretive looks like this:

appRoot.directive('myStates', function () {
return {
    restrict: 'EA',
    templateUrl: 'directivesHTML/ddStates.html',
    scope:false,
    controller: function ($scope)
    {
        var    dsStates = new kendo.data.DataSource({
                autoBind: false,
                page: 1,
                transport: {

                    read: {
                        url: "api/util/getStates",
                        dataType: "json"
                    }
                },

                schema: {
                    model: {
                        id: "stateID",
                        fields: {
                            stateID: { type: 'string' },
                            name: { type: "string" }
                        }
                    }
                }

            });


        dsStates.read().then(function () {

                $('#ddStates')
                .kendoDropDownList({
                    dataTextField: "name",
                    dataValueField: "stateID",
                    dataSource: dsStates,
                    optionLabel: '--',
                    change: function (e) {
                            }

                });
        });

    }
};

});

For some weird reason, it wont work, if I put the directive someplace else, any outside html page, it works just fine, but not from here. I thought it could be the version, upgraded it to the latest one for this month to no avail.

Any clues ?

-thanks,

Answer 1

You need to compile your html before appending it (using $compile service).

So in your editor: function,

// Specify what it is we'll be compiling.
var to_compile = '<div><my-states></my-states></div>';
// Compile the tag, retrieving the compiled output.
var _statesDirective = $compile(to_compile)($scope);
// Ensure the scope and been signalled to digest our data.
$scope.$digest();

// Append the compiled output to the page.
$compiled.appendTo(_statesDirective);

For more reference, Angular Docs for $compile

Also, how can we use $compile outside a directive in Angularjs