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

Question

我试图在每次聚焦时将输入大小从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这么快,我看不到它......好吧,这可能是因为弹出的几个警报.

Answer 1

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