javascript - 是否可以知道我的 AngularJS HTML 是否引用了不存在的 $scope 值？

Question

每当我的HTML 引用了我$scope中不存在的名称时，我如何指示 Angular 通知我？

示例输入：

<div ng-controller="MyController">
  {{oops}} <!-- This name does not exist in my $scope -->
</div>

期望的输出：

<div ng-controller="MyController">
    ERROR: No such name: "oops"
</div>

在 Django 中，这可以通过TEMPLATE_STRING_IF_INVALID设置来实现。

Answer 1

编辑：用过滤器做...（这将是全球性的）

app.filter('undefined', function(){ 
    return function(input, message) {
        return angular.isDefined(input) ? input : message;
    };
});

利用：

<div ng-controller="MyController">
  {{oops | undefined:'ERROR: No such name: "oops"'}} <!-- This name does not exist in my $scope -->
</div>

这应该够了吧。

---

这是快速简便的方法...

HTML

<div ng-controller="MyController">
    <span ng-show="isDefined(oops)">{{oops}}</span><span ng-hide="isDefined(oops)">ERROR: No such name: "oops"</span>
</div>

在您的控制器中：

app.controller("MyController", function($scope) {
   $scope.isDefined = function(x) {
      return angular.isDefined(x);
   };
});

---

编辑2：一种真正的“全局”方法，可以“自动”完成这一切......为此，您正在考虑重写 Angular 的 ngBind 指令，或者创建自己的绑定指令并在任何地方使用它。

这是 Angular 的 ngBind 指令，位于第 50 行：

var ngBindDirective = ngDirective(function(scope, element, attr) {
  element.addClass('ng-binding').data('$binding', attr.ngBind);
  scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
    element.text(value == undefined ? '' : value); //<-- this is the line.
  });
});

如您所见，当未定义该值时，它只是默认为 ''。

Answer 2

它可以简单地说明函数的含义。返回应该确定您是否显示消息或任何其他逻辑。

  app.filter('isDefined', function () {
    return angular.isDefined;
  });