調整焦點的輸入大小和模糊angularjs

我試圖改變輸入大小從20到100每次它的焦點。然後，當NG-模糊，應該從100轉換爲20.這是我的html代碼：調整焦點的輸入大小和模糊angularjs

<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轉換回來這麼快，我看不到它......呃，這可能是一個可能性，因爲有幾個警報彈出。

來源

2013-10-22 Franz Noel

在Angular世界中，您使用指令進行DOM操作。一個好處是你可以重新使用指令而不需要額外的代碼，並且可以從控制器中分離UI的東西。我創建了一個用於調整大小輸入的運算器：Plunker

來源

2013-10-22 05:26:09 tschiela

這也可以通過CSS實現，如果你不想寫一個指令，但可以說不是「角度的方式」 – zethus

是的，我試過了CSS。不知何故，我試圖把我的程序放在完美的角度。這樣，它可以反映純粹的HTML。 –

我更改了屬性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-22 16:46:42

只是增加了一些變化。儘管如此，我仍然在思考如何處理效果或動畫。 –

調整焦點的輸入大小和模糊angularjs

回答

相關問題