【问题标题】:How does angular binding happen?角度绑定是如何发生的?
【发布时间】:2015-10-13 08:13:45
【问题描述】:

以下是我对 angularJS 中绑定如何发生的理解。如果专家可以提供反馈/评论会很棒..

<div ng-controller="ctrlA">
  {{myvar}}
  {{anothervar}}
</div>

$scope.watch( function (scope) {
    return scope.anothervar;
  } ,  function (oldValue, newValue) {
    // code to manupilate HTML with new value!!
  });

$scope.watch( function (scope) {
    return scope.myVar;
  } ,  function (oldValue, newValue) {
    // code to manipulate HTML with new value!!
  });

只要 angularJS 遇到 {{myVar}}(和 {{anothervar}}),就会在内部创建一个观察者(针对每个变量)。这个观察者是为控制器'ctrlA'的$scope创建的。

每当在 $timeout、ng-click 等内调用函数时,它们都嵌入在 $scope.apply() 中。在你的函数执行后(这可能会改变一些范围变量),$apply 将在 rootScope 上调用摘要。这将在整个应用中与 UI 同步变量!

当 $scope.digest 被调用时,它会遍历该范围的所有观察者。然后它获取变量的当前值并检查它是否已更改。如果它发生了变化,它会调用观察者处理程序(它会更改 html 以反映新值!)。

我有一个问题。 angularJS 商店是否对每个范围都有某种键映射(或某种数据结构),其中包含对观察者的引用和该观察者的当前值?比如:

watch ref (for myvar) -> current value (of myvar)
watch ref (for anothervar) -> current value (of anothervar)

【问题讨论】:

标签: angularjs angularjs-watch angularjs-bindings


【解决方案1】:

您对 Angular 如何为每个绑定设置观察者的理解几乎是正确的。我将继续直接跳到问题,而不是揭穿/讨论您对 Angular 绑定的内部工作原理的观点。

我有一个问题。 angularJS store 是否对每个范围都有某种键映射(或某种数据结构),其中包含对观察者的引用和该观察者的当前值??

$scope 有一个当前活动的观察者的内部数组 (.$$watchers) 附加到所述范围,其中条目看起来像这样:

下面的解释是错误的。请参阅我的修改以进行更正

  • eq 是一个布尔值,指示 fn 中的表达式是否成立 真/假。
  • exp 是您在视图中显示在“曲线”{{raw_expr_value}} 之间的原始字符串值。
  • 相信fn 是对内部$interpolate.$$watchDelegate 的引用(或者如您所说,“对观察者的引用”)。如果这是一本手册 $scope.$watch('val', _func_)fn 将是对 _func_ 的引用。
  • get 我不太确定。如果有人能填写这是什么,那就太好了。
  • last 是表达式求得的最新值。

说了这么多,通常你不应该接触内部的$$ 变量,但如果你必须 - 继续。 轻点 :)


编辑

我错了。查看$watchsource,属性如下:

  • fn - 观察者的回调函数。
  • last - src$watch 的设置开始时应用的唯一 值。可能是为了触发表达式最初进行评估。
  • get - 用$parse() 包裹的表达式。
  • exp - prettyPrintExpression 这是我以前从未听说过的。回退到您的视图/$watch 处理程序中观察到的表达式。
  • eq - 这就是我哦,大错特错的地方。布尔值决定了我们是进行深度观察(对象相等)还是常规的浅层观察。

【讨论】:

  • 我玩过 Angular prettyPrintExpression:它似乎(从 1.5.0 开始)有时包含来自 DOM 绑定的原始观察表达式。前任。 ng-class="{active: $state.includes('profile')} 将导致具有 prettyPrintExpression={active: $state.includes('profile')} 的手表,但在 get / listener 中具有复杂的监视功能。这对记录绝对有用! (正如“漂亮的印刷品”所暗示的那样)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-06-15
  • 2021-08-07
  • 2015-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多