Angularjs:$scope.variable与 View 不同步？

Question

我觉得这个问题很愚蠢，因为我无法在 plunker 中重现这个问题，但它确实发生在我的真实项目中。

我创建了这个笨蛋 here ，我正在尝试观察作用域变量 searchString，它在这个 plunker 中工作正常，但在我的实际项目中则不然。 $scope.searchString 保持为空。不过，html 工作正常。可能的原因是什么？

我正在使用 Angle 和 Breeze，正如我尝试的那样，如果我将 searchString 附加到实体对象，那么它就可以工作。为什么？

Answer 1

当使用原语(字符串、 bool 值、数字等)时，您无法引用它。当您使用对象或数组时，您可以引用和修改它的成员。

这意味着，当你执行

$scope.$watch('searchString', function(str, oldValue) {
  console.log(str.length);
});

您正在检查 searchString 的新长度，当首次调用 $watch 和 oldValue 时，该长度可能为 null/未定义/空将包含当前值。因此，如果您从另一个范围或指令修改 searchString ，它不会受到影响，因为新范围 searchString 是被更改的范围(即当前实例)值(value))。为了有效地更改它的定义位置，您应该使用:

$scope.search = {input: ''};

$scope.$watch('search.input', function(str, oldValue) {
  console.log(str.length);
});

http://plnkr.co/edit/EFdnhQE1nN5vsBJR1sEm?p=preview

还有关于$watch的简要说明:scope.$watch将在$digest周期完成时调用。如果您从非 Angular 事件外部更改数据(基元甚至对象)(例如 jQuery 上的 element.on('click' ...))，则必须调用 $scope .$apply() 或 $timeout 将其反射(reflect)在您的 UI 上。否则，通过 ng-click 或从输入更改模型，您的 $digest 会被自动调用，从而实时更新所有内容。关于 $scope 和继承的一些信息在这里 https://stackoverflow.com/a/15645354/647380