Django and AngularJS: how to display Angular $http errors that come from Django debug error messages

Question

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?

this seems pertinent: http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs but it doesn't handle a full html page (with js and css etc.); that's what Django sends. — wgw, Jul 20 '14 at 01:37
Similar problem: http://stackoverflow.com/questions/22047701/append-html-content-to-an-iframe-in-angular-js — wgw, Jul 20 '14 at 02: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 '14 at 02: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 '14 at 06:12

score 0 · Answer 1 · edited May 23 '17 at 11:50

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

Django and AngularJS: how to display Angular $http errors that come from Django debug error messages

1 Answers1