javascript - Angular 指令不会随着作用域的更新而更新

Question

我对我的指令在其范围更新时明显无法更新感到困惑。

我想将 3 个不同表单字段中的字符相加，从 29 中减去该长度(由于原因......)，并将该总数作为字符串输出到指令模板中包含的一段 DOM 中。

指令:

    return {
      restrict: 'AE',
      replace: true,
      templateUrl: '<span>{{remainingChars}} remaining</span>',
      scope: {
        checktype: '=',
        checknumber: '=',
        depositnote: '='
      },
      link: function (scope, elem) {
        scope.remainingChars = 29 - scope.checktype.length - scope.checknumber.length -             scope.depositnote.length;
      }
    }

引用index.html中的指令:

      <deposit-note
          checknumber="transaction.checkNumber"
          checktype="transaction.checkType"
          depositnote="transaction.depositNote" />

这有点像:我可以在页面加载时单步执行该指令并观看 scope.remainingChars当指令第一次加载时设置为正确的数字。但是，如果我更改交易对象，该数字永远不会更新。

如果我在 transaction 上设置 $watchCollection，我可以获得我想要的行为对象，但我应该能够使用“=”双向绑定(bind)机制将该对象传递到隔离范围中。然而，该指令运行 1 次，计算正确，并且即使我更新其模型绑定(bind)到的表单字段，也不会再次更改其值。

一切都在范围内发生，所以我不认为我需要运行 $apply()，并且我需要在指令中完成此操作，因为我需要根据数字(正/消极的)。否则我就会有类似 <span>{{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}} remaining</span> 的东西在index.html中。

我在这里缺少什么？谢谢!

Answer 1

链接仅在初始指令链接阶段运行一次。

有几种方法可以做到这一点:在作用域上有一个名为剩余字符()的函数，并在那里返回正确的数量。然后在您的模板中有 {{remainingChars()}}

其次，你可以有一个监视表达式:

$scope.$watch(function() {
  // watch expression, fires the second function on change
  return transaction.checkNumber.length - transaction.depositnote.length}, function() {
  //update the remainingchars value here in the second function
})

或者第三，使用某种 ng-change 事件处理程序来更新剩余字符变量。

ng-change="calcRemanining()"