角指令不更新的范围更新 [英] 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.

我能得到我想要，如果我成立了上交易对象$ 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.

一切都发生在范围，所以我不认为我需要$运行应用（），我需要这一个指令来完成，因为我需要将样式应用到基于人数的DOM（正/负）。否则，我只想有类似＆LT;跨度＆GT; {{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}}其余＆LT; / SPAN＆GT; index.html中。

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 is only run once, during the initial directive link phase.

有多种方法，虽然这样做：
对范围称为remainingChars（）的函数，并返回正确的量存在。然后在你的模板有 {{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()}}

二，你可以有一个手表的前pression：

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事件处理的用于更新remainingchars变量。

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

ng-change="calcRemanining()"

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