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，我可以得到我想要的行为，但我应该能够使用＆＃39; =＆＃39将该对象传递到隔离范围;双向约束机制。然而，该指令运行一次，正确计算，并且即使我更新它的模型所绑定的表单字段，也不会再次更改它的值。

一切都在范围内发生，所以我不相信我需要运行$ apply（），我需要在指令中完成，因为我需要根据数字将样式应用于DOM（正负）。否则我会在index.html中找到类似<span>{{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}} remaining</span>的内容。

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

Answer 1

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

有几种方法可以做到这一点：在scopeChars（）上有一个函数，并在那里返回正确的数量。然后在您的模板中有{{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事件处理程序来更新remainingchars变量。

ng-change="calcRemanining()"

Angular指令不会更新为范围更新

1 个答案: