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

我在我的应用程序中使用了很多模态，我想将这些模态外包到一个单独的文件中。模态函数如下所示：

<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>

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

            //......

现在我只想把这些模式模板放到另一个html文件中，但是我的主

index.html

。 我已经尝试在我的index.html中引用另一个html文件，如：

我尝试过使用ng，包括：

，但没有任何效果

始终获得： “无法加载XMLHttpRequestfile:///C:/Users/Fred/foo/foo2/foo3/src/configurationModal.html. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https、chrome扩展资源。“

---

我怎样才能外包我的modals并仍然附加它们？

您可以使用$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
    });
});