KendoUI directive not working after using Angular $compile

Question

I've defined an Angular directive stField (<st-field>). It dynamically creates a DOM element, <st-field-vov>, and inserts it inside using $compile. I need this dynamic injection because there are other types of fields. The DOM would look like this:

<st-field>
    <st-field-vov></st-field-vov>
</st-field>

stFieldVov is another custom directive I create, it handles the rendering of the concrete field. Here is the JS:

    (function(module) {
        'use strict';

        module
            .directive('stField', _stField)
            .directive('stFieldVov', _stFieldVov);

        /*ngInject*/
        function _stField($compile, stFieldSvc) {
            return {
                restrict: 'E',
                scope: {
                    stFieldTmpl: '=',
                    stDataObjects: '='
                },
                link: function(scope, $elem) {
                    var _fieldTmpl = scope.stFieldTmpl,
                        template = '<st-field-' + stFieldSvc.getFieldTypeShortName(_fieldTmpl.type) + '></div>';

                    $elem.append($compile(template)(scope));
                }
            };
        }

        function _stFieldVov() {
            return {
                restrict: 'E',
                link: function(scope) {
                    var _fieldTmpl = scope.stFieldTmpl,
                        _dataObjects = scope.stDataObjects,
                        _isValue = true;

                    scope.dataObjectDropDownOptions = {
                        dataSource: new kendo.data.DataSource({
                            data: _dataObjects
                        }),
                        dataTextField: 'name',
                        dataValueField: 'id'
                    };
                },
                templateUrl: '/widgets/fields/directives/templates/vov.html'
            };
        }
    })(angular.module('st.widgets.fields'));

Here is the template for stFieldVov:

<div class="input-group">
    <input type="text" class="form-control" ng-show="isValue()">
    <input kendo-drop-down-list
            k-options="dataObjectDropDownOptions"
            k-option-filter="contains">
    <span class="input-group-btn">
        <button type="button" class="btn"
                ng-class="{'st-btn-do': isDataObject()}">
            <span class="icon-server"></span>
        </button>
    </span>
</div>

The problem is that the k-options for configuring the Kendo widget, kendoDropDownList, doesn't work. I think this is because I used $compile to generate <st-field-vov> as k-options works well if use kendoDropDownList in <st-field>.

The browser doesn't throw any error, it is just that the drop down data is empty.

Thanks for reading.

Answer 1

Try to use this:

$elem.append(template);
$compile($elem.contents())(scope);