Angular 指令不会随着范围更新而更新 [英] Angular directive does not update as scope updates

问题描述

我的指令在其范围更新时明显失败，这让我感到困惑.

I'm puzzled by the apparent failure of my directive to update whenever its scope updates.

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

I want to add up the characters in 3 different form fields, subtract that length from 29 (cause of reasons...), and output that total as a string in a piece of DOM contained in the directive template.

指令:

    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 中的指令:

Reference to directive in index.html:

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

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

This works sort-of: I can step through the directive when the page loads and watch scope.remainingChars get set to the right number when the directive loads the first time. However, if I change the transaction object, the number never updates.

如果我在 transaction 对象上设置 $watchCollection，我可以获得我想要的行为，但是我应该能够使用 '=' 两个-将该对象传递到隔离范围方式绑定机制.然而，该指令运行 1 次，计算正确，并且即使我更新它的模型绑定到的表单字段也不会再次更改它的值.

I can get the behavior I want if I set up a $watchCollection on the transaction object, but I should be able to just pass that object into the isolate scope using the '=' two-way-binding mechanism. Yet the directive runs 1 time, calculates correctly, and never changes it's value again even when I update the form fields it's model is bound to.

一切都发生在作用域上，所以我认为我不需要运行 $apply()，我需要在指令中完成这个，因为我需要根据数字(正/消极的).否则，我只会在 index.html 中剩下类似 <span>{{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}} 之类的东西</span>.

Everything is happening on scope, so I don't believe I need to run $apply(), and I need this to be done in a directive because I need to apply styling to the DOM based on the number (positive / negative). Otherwise I would just have something like <span>{{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}} remaining</span> in index.html.

我在这里错过了什么?谢谢！

What am I missing here? Thanks!

推荐答案

link 在初始指令链接阶段只运行一次.

link is only run once, during the initial directive link phase.

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

There's several ways to do this though: Have a function on the scope called remainingChars(), and return the correct amount there. Then in your template have {{remainingChars()}}

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

Second, you could have a watch expression:

$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 事件处理程序来更新剩余字符变量.

Or third, have some kind of ng-change event handler which updates the remainingchars variable.

ng-change="calcRemanining()"

这篇关于Angular 指令不会随着范围更新而更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！