Question

我正在尝试在每次聚焦时将输入大小从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 JobMaps = angular.module('JobMaps', ['MenuCtrl']);

这是我的角度代码：

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这么快，我看不到它......好吧，这可能是因为弹出的几个警报。

Answer 1

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

Answer 2

我更改了属性size，因为width会影响使用Bootstrap时的响应能力。

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); });
    }
  }
});

调整焦点上的输入大小和angularjs中的模糊

2 个答案: