angular 指令 - 使用 templateUrl 嵌入

Question

transclude 和 templateUrl 可以在一个指令中协同工作吗？

我正在尝试制作支持 html 的动态模态指令。

modal.js

'use strict';

myApp.directive('siteModal', function($http) {
    return {
        restrict: 'A',
        transclude: true,
        templateUrl: "./components/modal/modal.html",
    };
});

modal.html

<div class="site-modal">

    <div class="site-modal-content">

        <div class="site-modal-body">
            {{modalContent}}
        </div>

    </div>
    <div class="site-modal-overlay"></div>
</div>

用法：

<div site-modal ng-transclude>
    Hello World <strong>and maybe some HTML too!</strong>
</div>

Answer 1

它应该一起工作。您刚刚放错了 ng-transclude 属性。

<div class="site-modal">

    <div class="site-modal-content">

        <div class="site-modal-body">
            <p ng-transclude> </p>
        </div>

    </div>
    <div class="site-modal-overlay"></div>
</div>

angular 指令 - 使用 templateUrl 嵌入

angular directive - transclude with templateUrl

directive

angularjs