在Angular JS中使用iFrame

时间:2014-09-04 12:45:08

标签: javascript html grails iframe

我有两个不同的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) 

1 个答案:

答案 0 :(得分:1)

源应该是您的maindocument.html位于文件夹中的位置

资产/模板/ mainapp / maindocument.html

使用 -

<iframe src="assets/templates/mainapp/maindocument.html"></iframe>