在angularjs中根据焦点和模糊调整输入大小

我正在尝试将输入大小从20更改为100，每次它会改变焦点。然后，当它模糊时，它应该从100转换为20。以下是我的html代码：

<div ng-controller="MenuCtrl" class="navbar-collapse collapse bs-navbar-collapse navbar-ex1-collapse">
  <input type="text" class="form-control" ng-blur="{[{ change_text_width() }]}" ng-focus="{[{ change_text_width() }]}" size="{[{search_text_width}]}" placeholder="Search">
</div>

这是我的角度代码：

var MenuCtrl = angular.module('MenuCtrl',[]);
MenuCtrl.controller = angular.module('MenuCtrl',function($scope) {
  $scope.search_text_width = 20;
  $scope.change_text_width = function() {
    if ($scope.search_text_width==20) {
      $scope.search_text_width = 100;
      //alert($scope.search_text_width);
    } else {
      $scope.search_text_width = 20;
      //alert($scope.search_text_width);
    }
  }
});

观察：

我试着提醒它，它似乎运行了好几次

我想它可能是从20到100，100到20转换得如此之快，我看不到它。。。嗯，这可能是因为弹出了几个警报

---

在角度世界中，使用指令进行DOM操作。一个优点是，您可以重用指令，而无需太多额外的代码，并将UI内容与控制器分离。我为调整输入大小创建了一个plunker:

在角度世界中，您使用指令进行DOM操作。一个优点是，您可以重用指令，而无需太多额外的代码，并将UI内容与控制器分离。我为调整大小的输入创建了一个plunker:

我更改了属性

大小

，因为

宽度

会影响使用引导时的响应

MenuCtrl.directive('changeSize', function () {
  return {
    restrict: 'A',
    link: function($scope, $element, $attributes) {
      var onFocusSize = $attributes['changeSize'] || $element.attr('size');
      var onBlurSize = $element.attr('size');
      $element.focus(function() { $element.attr('size',onFocusSize); });
      $element.blur(function() { $element.attr('size',onBlurSize); });
    }
  }
});

---

我更改了属性

size

，因为

width

会影响使用引导时的响应

MenuCtrl.directive('changeSize', function () {
  return {
    restrict: 'A',
    link: function($scope, $element, $attributes) {
      var onFocusSize = $attributes['changeSize'] || $element.attr('size');
      var onBlurSize = $element.attr('size');
      $element.focus(function() { $element.attr('size',onFocusSize); });
      $element.blur(function() { $element.attr('size',onBlurSize); });
    }
  }
});

---

如果你不想写指令，这也可以通过CSS实现，但可以说不是“角度方式”。是的，我试过CSS。不知怎的，我试图把我的程序放在一个完美的角度。通过这种方式，它可以反映纯html。如果您不想编写指令，也可以通过CSS实现，但可以说不是“角度方式”。是的，我尝试过CSS。不知怎的，我试图把我的程序放在一个完美的角度。这样，它可以反映纯html。只是增加了一些变化。不过，我仍在考虑如何处理效果或动画，只是增加了一些变化。不过，我仍在考虑如何处理效果或制作动画。