如何在html5模板中使用自定义angularjs指令

Question

我创建了一个html5模板和一个自定义angularjs指令。我想在h5模板中使用此指令。但该指令不起作用。我的代码就像这样，

HTML：

        <template id="templateId">
        <section class="col-sm-6">
            <div style='display: table; width: 100%;'>
                <div class="form-row ">
                    <div class="form-cell">
                        <label style="width: 150px;">Acronym</label> 
                        <my-custom-directive data-field="acronym"/>
                    </div>
                </div>
            </div>
        </section>
    </template>

指令是这样的，

myApp.directive('myCustomDirective', [function () {
return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<input id="acronym" type="text" style="width: 200px;">',
    ...

    }

}]）;

此指令不起作用，运行此代码时，“my-custom-directive”不会被input元素替换。