AngularJs - 强制范围属性存在于 angularJs 绑定上答案

【问题标题】：AngularJs - force scope property to exist on angularJs bindingAngularJs - 强制范围属性存在于 angularJs 绑定上
【发布时间】：2014-02-18 16:07:57
【问题描述】：

我注意到，当绑定到当前范围内不存在的属性时，您不会收到 Javascript 错误。事实上，我相信 Angular 会在作用域上设置一个新属性。

我曾经使用 KnockoutJS，当数据绑定表达式引用 viewmodel 上的未定义属性时，它确实会引发 JS 错误。

有没有办法配置 AngularJS 来做同样的事情？我更喜欢这种“严格”的验证方法，因为 JS 错误消息有助于故障排除

示例 HTML：

<div ng-app>
    <div ng-controller="ctrl">
        {{username1}}
    </div>
</div>

还有 Javascript：

function ctrl( $scope ) {
    $scope.username = 'user1';
}

HTML 上的拼写错误意味着绑定不匹配。如果有 JS 错误告诉我，那就太好了……

【问题讨论】：

标签： angularjs angular-ngmodel

【解决方案1】：

您可能会创建一个过滤器来检查未定义的属性：

app.filter("throwUndefined", function ($exceptionHandler) {
        return function (input) {
            if (input === undefined) {
                $exceptionHandler(new Error("Property was undefined"),
                                  "throwUndefined filter");
            }
            return input;
        };
    });

看起来有点开销，但 HTML 是这样的：

<div ng-app="myApp" ng-controller="myController">
    {{variable | throwUndefined}}
    {{variable1 | throwUndefined}}
</div>

未定义的变量将调用异常处理程序。没有办法查看触发此事件的属性或查看是否是因为该属性未定义或设置为未定义值，但您可以通过调用堆栈找到它。不过，您似乎希望在视图和控制器之间获得更多信任 - 即我会说让您的控制器检查，但如果您这样做，您始终可以确保设置了一个值。

小提琴：http://jsfiddle.net/jeremylikness/BHjRg/

【讨论】：

嗯，谢谢你的建议，我会考虑这个选项，但正如你所说，这有点开销。我想这意味着 AngularJS 无法配置为开箱即用......因为这是一个潜在的解决方法，我会将其标记为已回答

【解决方案2】：

这不会引发异常，因为$scope.username1 == undefined。 $scope 只是一个普通的 javascript 对象，因此请求一个不存在的密钥将始终返回 undefined。 {{undefined}} 将插入一个空字符串；因此，也不例外。如果您的 HTML 包含 {{bacon}}，您将遭受同样的命运。希望对您有所帮助！

【讨论】：