在Angular JS中使用iFrame

Using iFrame in Angular JS

本文关键字：iFrame Angular JS      更新时间：2023-09-26

我有两个不同的html页面。我想使用iframe将第二个显示为第一个。这两个html页面都在assets/templates/mainapp/下的grail-app文件夹中。我正在使用ngroute处理页面。

第一个html页面是

    <!-- @author Karan Shah -->
<body>
    <div>
        <h1>Document Display Contents</h1>
        <!-- Back -->
        <a href="#/documents">Back to the List of Documents</a>
        <!-- Get the name of the selected document from previous view to be displayed on current view  -->
        <br>    
        <div ng-controller='displaycontrol'>
            You are viewing : <b>{{doc}}</b>
        </div>
        <!-- Http get request to get the text of the document to controller -->
        <br>    
        <div ng-controller='textcontrol'>
            {{textofdocument}}
        </div>
        <div>
            <iframe ng-src="/maindocument.html">Fail</iframe>
        </div>
    </div>
</body>

HTML的第二个页面是（maindocument.HTML）

<!DOCTYPE html>
<html >
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Hello how are you ??
</body>
</html>

控制器文件

/**
 * @author Karan Shah
 * 
 */
var documentDisplayModule = angular.module('ald.documentdisplay',[]);
// Selected document name from previous view gets displayed on the document display view using $routeParams
documentDisplayModule.controller('displaycontrol',['$scope','$routeParams', function($scope,$routeParams){
    $scope.doc=$routeParams.doc;
}]);
// $http.get to get the text based on the selected document
documentDisplayModule.controller('textcontrol',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
    $http.get("/document/getContents?docName="+$routeParams.doc).success(function(datatext){
    $scope.textofdocument=datatext;
    })
}])
documentDisplayModule.controller('framecontrol',['$scope',function($scope){
    $scope.docurl="assets/templates/mainapp/maindocument.html";
}])

我想我没有把src做好。有人能告诉我应该是什么来源吗？我不能展示任何东西。这是我在调试时遇到的错误

GET http://localhost:8080/maindocument.html 404 (Not Found)

源应该位于文件夹中maindocument.html所在的位置

即。

assets/templates/mainapp/maindocument.html

使用-

<iframe src="assets/templates/mainapp/maindocument.html"></iframe>
相关文章：