0

I have a Django view that is called from Angular with a $http.post

//LOADFILE ===================
    this.loadfile = function (clickedItem) {
        $http.post('/display/' , { "filename": clickedItem.fileName} )
            .success(function(data) {
                    $scope.fileView.text = data;
                    $scope.fileView.title = clickedItem.title
            }).error(function(data) {$scope.displayError=data});
    };

If Django throws an error, data will be a full Django error page (full html page).

How do I display that error page (a complete html page) under Angular? (Some discussion of modals here : AngularJS, show popups - The most elegant way?, but nothing about a complete html page...)

I thought I could do this with a frame element and dom:

$window.frames['myErrorFrame'].document.innerHTML = $scope.displayError;

But that doesn't look very Angularish... And this almost does it, but I still have the problem of writing directly to the dom since the src is a string: insert an iframe into page dynamically in AngularJS

Is there a better way to display a full html page string in Angular?

4
  • this seems pertinent: stackoverflow.com/questions/9381926/… but it doesn't handle a full html page (with js and css etc.); that's what Django sends.
    – wgw
    Jul 20, 2014 at 1:37
  • Similar problem: stackoverflow.com/questions/22047701/…
    – wgw
    Jul 20, 2014 at 2:17
  • maybe save it in a templateCache, then call it to fill your ng-view with it. Once you have it in the templateCache, you can put it in any ng-include, you could even open up a modal and display the content in it.
    – Alex C
    Jul 20, 2014 at 2:25
  • Interesting idea...I tried: angular.element("#errorIFrame").append($compile(data)); but that did not work (so far). I will read up on the templateCache. Looks like an option.
    – wgw
    Jul 20, 2014 at 6:12

1 Answer 1

0

Here is a possible solution. It works, but there are degrees of working, and this is a bit hacky -- the degree zero of working.

The error function (from Write elements into a child iframe using Javascript or jQuery):

update_error = function (message) {
            var ifrm = document.getElementById('errorIFrame');
            ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
            ifrm.document.open();
            ifrm.document.write(message);
            ifrm.document.close();
        };

And the html:

<div ng-show="errorMessage != ''">
<button class="btn btn-info btn-xs" ng-click="errorMessage=''">Close</button><br />
<iframe width="100%" id="errorIFrame"> </iframe>
</div>

The error callback:

.error(function(data) {
                update_error(data);
                $scope.errorMessage="error"}

Note the switching of the errorMessage flag, which I seem to have to do because update_error is outside the controller (there must be a simple fix for that, but I have other fish to fry). This works, but I imagine it isn't orthodox. There is probably a better way with $sce (will fry that one later).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.