Question

我已经定义了Angular指令stField（<st-field>）。它动态创建DOM元素<st-field-vov>，并使用$compile将其插入内部。我需要这种动态注入，因为还有其他类型的字段。 DOM看起来像这样：

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

stFieldVov是我创建的另一个自定义指令，它处理混凝土字段的渲染。这是JS：

＆＃13;

    (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'));

＆＃13;

以下是stFieldVov的模板：

＆＃13;

<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>

＆＃13;

问题是配置k-options窗口小部件Kendo的{{1}}无法正常工作。我认为这是因为我使用kendoDropDownList生成$compile因为<st-field-vov>在k-options中使用kendoDropDownList时效果很好。

浏览器不会抛出任何错误，只是下拉数据为空。

感谢阅读。

Answer 1

尝试使用它：

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

使用Angular $ compile后，KendoUI指令无法正常工作

1 个答案: