angular指令 - 用templateUrl转换

时间:2016-06-25 04:52:32

标签: angularjs directive

可以在一个指令中转换和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>

1 个答案:

答案 0 :(得分: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>