Директива KendoUI не работает после использования Angular $ compile

Question

Я определил Угловую директиву stField (<st-field>). Он динамически создает элемент DOM, <st-field-vov>, и вставляет его внутри, используя $compile. Мне нужна эта динамическая инъекция, потому что есть другие типы полей. DOM будет выглядеть следующим образом:

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

stFieldVov еще один обычай директивы я создаю, он обрабатывает рендеринг конкретного поля. Вот 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'));

Вот шаблон для 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>

Проблема заключается в том, что k-options для настройки Kendo виджета, kendoDropDownList, не работает. Я думаю, это потому, что я использовал $compile для генерации <st-field-vov>, так как k-options хорошо работает, если используется kendoDropDownList в <st-field>.

В браузере не возникает никаких ошибок, просто выпадающие данные пустые.

Спасибо за чтение.

Answer 1

Попробуйте использовать это:

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