angularjs-directive - 如何在 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”。