gpt4 book ai didi

javascript - 优雅地错误出 Angular JS 中的模板变量

转载 作者:行者123 更新时间:2023-11-30 17:00:00 25 4
gpt4 key购买 nike

当 Angular 应用程序中有一行代码导致错误时,整个模板就崩溃了。

例如,这段代码(当我们尝试为 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>

完全破坏了页面,它看起来像这样:

enter image description here

是否有一些配置选项可以添加到我的 Angular 应用程序中,以便页面更优雅地输出错误?具体来说,模板中包含在 {{}} 中的变量,如果应用程序出现错误,根本不会显示它们。

最佳答案

一种更优雅地出错的方法是使用:

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

foo.bar 破坏应用程序时,丑陋的 {{hello_msg}} 将不会显示。


请查看this plunker证明了这一点


重要提示

使用ng-bind-html而不是大括号,你需要包括ng-sanitize在你的模块中

关于javascript - 优雅地错误出 Angular JS 中的模板变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29067263/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com