AngularJs - 强制范围属性存在于 AngularJs 绑定(bind)上

Question

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

我曾经使用过 KnockoutJS，当数据绑定(bind)表达式引用 View 模型上未定义的属性时，它确实会抛出 JS 错误。

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

示例 HTML:

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

和 JavaScript:

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

HTML 上的拼写错误意味着绑定(bind)不匹配。如果能得到一个 JS 错误来告诉我那就太好了...

Answer 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>

undefined variable 将调用异常处理程序。没有办法查看触发此问题的属性，或者查看是否是因为该属性未定义或设置为未定义的值，但您可以通过探索调用堆栈来找到它。不过，您似乎希望 View 和 Controller 之间有更多的信任 - 也就是说，我会说让您的 Controller 检查，但如果您这样做，您始终可以确保设置了一个值。

fiddle :http://jsfiddle.net/jeremylikness/BHjRg/