Gracefully error out template variables in Angular JS

Question

When there is a line of code in an Angular application that causes an error, the entire template is broken.

For example, this code (which results in an error when we try to assign a value to foo.bar):

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>My App</title>
  </head>
  <body>
    <div class="container" id="home" ng-controller="MainCtrl">
      <h1>Message: {{hello_msg}}</h1>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
    <script>
      var myApp = angular.module('myApp', ['myApp.controllers']);
      angular.module('myApp.controllers', []).
        controller('MainCtrl', ['$scope', function ($scope) {
          var hello_msg = 'Hello!';
          $scope.hello_msg = hello_msg;

          // malformed JS
          foo.bar = 'app breaks';
        }]);
    </script>
  </body>
</html>

Completely breaks the page, and it looks like this:

enter image description here

Is there some configuration option that I can add to my Angular app so that the page erorrs out more gracefully? Specifically, the variables in the templates that are wrapped in {{ and }}, do not display them at all if there is an error in the app.

This does not work. the template is still broken even if I include ng-cloak — SeanPlusPlus
– SeanPlusPlus, Commented Mar 15, 2015 at 23:06

Manube · Accepted Answer · 2015-05-19 09:40:53Z

2

One way to error out more gracefully would be to use:

<div ng-bind-html="hello_msg">

The ugly {{hello_msg}} would not display when the foo.bar breaks the app.

Please check this plunker that proves the point

IMPORTANT NOTE

To use ng-bind-html instead of the curly brackets, you need to include ng-sanitize in your module.

edited May 19, 2015 at 9:40

answered Mar 15, 2015 at 23:28

Manube

5,2294 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gracefully error out template variables in Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related