Question

我有一个AngularJS指令来显示或隐藏输入标签。当您从空输入开始并开始输入时，一切正常。但是当输入预先填充ng-model时，标签应该首先显示，并且它开始隐藏。我检查了输入的值，它是未定义的。我确信有一个明显的原因/解决方案，但我找不到它。 Plunker

ANGULAR：

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时出现的一个侧面问题，为什么范围更新发生在一个关键背后？

Answer 1

简化方法就是使用ng-class

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

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

关于您的代码无法正常工作的原因，当关键事件发生时，模型很可能没有更新（我尝试过没有使用过keyup）但是如果你想知道＆＃ 39;继续使用ng-model作为输入，您可能希望查看ngModelController以了解如何需要ng-model并在值更新时获取处理或在需要时触发更改。

或者当您只想在模型更改时使用ng-change调用控制器中的某些功能时。

Answer 2

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

您已从输入字段绑定了keyup事件的事件侦听器。直到keyup事件触发valueDefined将被取消定义，因为它只在一个地方定义（在事件监听器函数内）。文本输出指向{{valueDefined}}而不是ng-model值。

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

正如shaunhusain所提到的，你可以用ng级来实现这一点。这里实际上并不需要新的指令。

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

2 个答案: