AngularJS：当 newValue === oldValue 时，$watch 与 $observe

Question

如果这已经在某处解释或讨论过，我很抱歉，但我找不到任何地方讨论过这个确切的问题。

所以我有一个带有一个数据绑定“myvar”的角度指令（= 或 @ 没有区别）。数据绑定的值在指令中使用：scope.myvarStr = scope.myvar + 'somestring'。然后我在模板中绑定 myvarStr。

因为 scope.myvarStr 必须在 scope.myvar 更改时进行修改，所以我使用 $watch('myvar', function(...)) 来观察值并在需要时更新 scope.myVarStr。在 watch 函数中我把经典的 if (newValue === oldValue) return;

问题从 $watch 第一次触发时就开始了，两个值相等；然后视图没有更新。我可以很容易地从链接函数第一行的 console.log(scope.myvar) 中看到 scope.myvar 是未定义的（或“依赖于绑定类型”），并且该值已更改为其他值我在 $watch 中做了一个 console.log。

我用谷歌搜索了一个小时左右，发现了这个：https://github.com/angular/angular.js/issues/11565 但是，这个问题在其他任何地方都没有讨论过，所以我在 Google 上搜索了一下，发现了 $observe AngularJS : Difference between the $observe and $watch methods

当我从 $watch 更改为 $observe 时，我的所有问题都消失了，我仍然可以使用 if(newValue === oldValue) return;。

(function(directives) {
'use strict';

directives.directive('someDir', [function() {
    return {
        restrict: 'E',
        scope: {
            myvar: '=' //or @ didn't matter at the time...
        },
        template: '<p>{{myvarStr}}</p>',
        link: function(scope, el, attrs) {

            function toString() {
                if (scope.myvar < 1000) {
                    scope.myvarStr = scope.myvar;
                } else {
                    scope.myvarStr = scope.myvar/1000 + 'k';
                }
            }
            toString();

            scope.$watch('myvar', function(newValue, oldValue) {
                console.log("changed", newValue, oldValue)
                if (newValue == oldValue) return;
                toString();
            },true);

            // When changing to $observe it works :)
            //attrs.$observe('myvar', function(newValue, oldValue) {
            //    console.log("changed", newValue, oldValue)
            //    if (newValue == oldValue) return;
            //    toString();
            //},true);

        }
    };
}]);
}(angular.module('myApp.directives')));

建议：据我了解，$watch 会出现此问题，因为范围值从未更改过。指令需要一段时间才能获取值，直到那时绑定只是一个空字符串或其他东西，当检测到值时 $watch 触发但实际范围值没有改变（或如第一个链接中所述; 当值“出现”在指令中时，第一个手表会触发）。

Answer 1

我不太明白你的建议/解释，但我觉得事情比你说的要简单得多。

您不需要 newValue === oldValue 测试，因为您的 watch-action 是幂等且便宜的。但即使你这样做，也只意味着你需要自己初始化值（例如通过手动调用toString()），你似乎正在这样做，因此你的指令应该按预期工作。 （事实上​​，我无法重现您在代码中提到的问题。）

无论如何，这是一个（简单得多的）working version：

.directive('test', function testDirective() {
  return {
    restrict: 'E',
    template: '<p>{{ strVal }}</p>',
    scope: {
      val: '='
    },
    link: function testPostLink(scope) {
      scope.$watch('val', function prettify(newVal) {
        scope.strVal = (!newVal || (newVal < 1000)) ?
            newVal : 
            (newVal / 1000) + 'K';
      });
    }
  };
})

---

顺便说一句，由于您只是尝试“格式化”某些值以进行显示，因此 filter 似乎比 $watch 更合适（并且清除 imo）（参见 @987654322 @):

.filter('prettyNum', prettyNumFilter)
.directive('test', testDirective)

function prettyNumFilter() {
  return function prettyNum(input) {
    return (!input || (input < 1000)) ? input : (input / 1000) + 'K';
  };
}

function testDirective() {
  return {
    template: '<p>{{ val | prettyNum }}</p>',
    scope: {val: '='}
  };
}