Question

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

我以前使用KnockoutJS，当data-bind表达式引用viewmodel上的未定义属性时，它确实抛出了JS错误。

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

示例HTML：

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

和Javascript：

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

HTML上的拼写错误意味着绑定不匹配。得到一个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值，但您可以检测调用堆栈以找到它。看起来你希望你的视图和控制器之间有更多的信任 - 也就是说我会让你的控制器检查，但如果你这样做，你总是可以确保设置一个值。

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

Answer 2

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

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

2 个答案: