即使定义了ng-model，输入值也是未定义的

Input value is undefined even when ng-model is defined

本文关键字：未定义 输入 定义 ng-model      更新时间：2023-09-26

我有一个AngularJS指令来显示或隐藏输入标签。当您从空输入开始并开始键入时，一切都很好。但是当输入预先填充了ng-model时，标签应该一开始就显示出来，并且开始隐藏。我检查了输入的值，没有定义。我肯定有一个明显的原因/解决办法，但我找不到。恰好

角:

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: 

<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>

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

一种简化的解决方案是直接使用ng-class来代替

http://plnkr.co/edit/aqYHWtzhilWrU2YpTscx?p =

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

关于为什么你的代码不工作，模型可能没有更新当键下事件发生时(不工作与keyup我也试过)，但如果你想知道什么是与ng-model的输入你可能想看看ngModelController，看看你如何可以要求ng-model，并得到一个处理当值更新或触发更改时，如果需要。

或者，当你只想在模型更改时调用控制器中的某些函数时，使用ng-change.

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

您已经将事件侦听器绑定到来自输入字段的keyup事件。在keyup事件触发之前，valueDefined将是未定义的，因为它只在一个地方定义过(在事件侦听器函数中)。文本输出指向{{valueDefined}}而不是ng-model值。

"为什么作用域更新发生在一个按键之后?"^^见上文。这都是由输入字段上的按键触发的。

正如shaunhusain提到的，您可以使用ng-class实现这一点。这里实际上不需要一个新的指令

相关文章：