Javascript 即使定义了ng模型，输入值也未定义

我有一个AngularJS指令来显示或隐藏输入标签。当您以空输入开始输入并开始键入时，一切正常。但当输入预先填充ng模型时，标签应首先显示，然后开始隐藏。我已经检查了输入的值，它是未定义的。我肯定有一个明显的原因/解决办法，但我找不到

角度：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.customer = {
    name: "Patrick"
  };
});

app.directive('labelToggle', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {

      var thisLabel = element.find('label');
      var thisInput = element.find('input');

      scope.valueDefined = thisInput[0].value;

      thisInput.on('keyup', function () {

        if (this.value) {
          thisLabel.addClass('show-label');
        } else {
          thisLabel.removeClass('show-label');
        }

        scope.valueDefined = thisInput[0].value;

      });

    }
  };
});

HTML:

顾客
价值{{valueDefined}}

---

作为编写Plunker时出现的一个附带问题，为什么范围更新发生在一次按键之后？

简化的解决方案是只使用ng类

客户

关于代码不起作用的原因，当发生键关闭事件时，模型可能没有更新（我也尝试过使用键打开）但是，如果您想知道输入的ng模型发生了什么，您可能需要查看ngModelController，以了解如何需要ng模型，并在值更新时获得句柄，或者在需要时触发更改

---

或者，当您只想在模型更改时调用控制器中的某个函数时，请使用ng change。

正如您所猜测的，一旦看到它，这是一个非常明显的解决方案

您已经从输入字段将事件侦听器绑定到

keyup

事件。 在触发

键控

事件之前，

值定义

将是未定义的，因为它只在一个位置（在事件侦听器函数内）定义过。 文本输出指向的是

{{valueDefined}

，而不是ng模型值

“为什么范围更新发生在一次按键之后？”^^^请参见上文。这都是由该输入字段上的按键触发的

---

正如shaunhusain提到的，您可以通过ng类实现这一点。这里实际上不需要新的指令。

Wow。我真不敢相信我把事情弄得这么复杂。谢谢。@psnoonan是的，我在第一次学习angular的时候也做了很多，学习了指令，并开始尝试编写各种指令，但实际上，在开始做定制的事情之前，你可以用盒子里的东西做很多事情，很高兴这对你有用。

<div label-toggle class="input-wrap">
  <label>Customer</label>
  <input type="text" name="customer" placeholder="Customer" ng-model="customer.name">
</div>

<div>Value? {{valueDefined}}</div>

  <label ng-class="{'show-label':customer.name}">Customer</label>