Question

我在我的应用程序中使用了很多模态，我想将这些模态外包到一个单独的文件中。模态看起来像这样：

<script type="text/ng-template" id="configurationModal.html">
        <div class="modal-header">
            <h3>Configuration</h3>
        </div>
        <div class="modal-body">
            <label>Host: </label><input ng-model="hostName"><br>
            <label>Port: </label><input ng-model="port">
            <div>
                <label>CouchDB</label><br>
                <label>Host: </label><input ng-model="dbProperties.dbHostName"><br>
                <label>Port: </label><input ng-model="dbProperties.dbPort"><br>
                <label>User: </label><input ng-model="dbProperties.dbUser"><br>
                <label>Password: </label><input type="password" ng-model="dbProperties.dbPassword"><br>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn primary-btn btn2" ng-click="cancel()">OK</button>
        </div>
</script>

在我的js文件中，我这样附上它：

$scope.configureFactory = function () {
    $uibModal.open({
        templateUrl: 'configurationModal.html',
        backdrop: true,
        windowClass: 'configuration-modal',
        controller: function ($scope, $uibModalInstance) {

            //......

现在我只想把这些模态模板放到另一个html文件中，但我的主要index.html。我已经尝试在index.html中引用另一个html文件，如：

<link type="text/html" href="modals.html"/>

我尝试过使用ng-include：

<div ng-include="'configurationModal.html'"></div>，但没有任何作用。

总是得到：＆＃34; XMLHttpRequest无法加载file：/// C：/Users/Fred/foo/foo2/foo3/src/configurationModal.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。＆＃34;

我如何外包我的模态并仍然附上它们？

Answer 1

您可以使用$ templateRequest，如下所示......

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
    // Make sure that no bad URLs are fetched. If you have a static string like in this
    // example, you might as well omit the $sce call.
    var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');

    $templateRequest(templateUrl).then(function(template) {
        // template is the HTML template as a string

        // Let's put it into an HTML element and parse any directives and expressions
        // in the code. (Note: This is just an example, modifying the DOM from within
        // a controller is considered bad style.)
        $compile($("#my-element").html(template).contents())($scope);
    }, function() {
        // An error has occurred here
    });
});

如何使用AngularJS将模态外包到另一个html文件中

1 个答案: