1

每次 ng-focus 时，我都试图将输入大小从 20 更改为 100。然后，当它 ng-blur 时，它应该从 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);
    }
  }
});

观察：

  1. 我试图提醒它，它似乎运行了好几次。
  2. 我认为它可能正在从 20 到 100 和 100 到 20 转换得如此之快，我看不到它......好吧，这可能是因为弹出了几个警报。
4

2 回答 2

6

在 Angular 世界中，您使用指令进行 DOM 操作。一个优点是您可以在没有太多额外代码的情况下重用指令，并将 UI 内容与控制器分开。我为调整大小输入创建了一个 plunker：Plunker

于 2013-10-22T05:26:09.653 回答
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); });
    }
  }
});
于 2013-10-22T16:46:42.193 回答