Angular Get Focus On Show

Angular Get Focus On Show.markdown

Angular Get Focus On Show

A Pen by cj coffey on CodePen.

License.

index.html

<div class="box" ng-app="myApp">
  <div ng-controller="MyCtrl">
    <h1>get focus demo</h1>
    <button class="btn btn-default" ng-click="changeFocus()">focus</button>
    <div>
      <input type="text" ng-show="isFocused" show-focus="isFocused">
    </div>
  </div>
</div>

script.js

var myApp = angular.module('myApp', []);
myApp.directive('showFocus', function($timeout) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.showFocus, 
      function (newValue) { 
        $timeout(function() {
            newValue && element[0].focus();
        });
      },true);
  };    
});
myApp.controller('MyCtrl', function($scope) {
  $scope.isFocused = false;
  $scope.changeFocus = function() {
    $scope.isFocused = !$scope.isFocused;
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>

style.css

.box {
    margin-top: 10px;
    margin-left: 10px;
}
.demobox {
    width: 400px;
    min-height: 40px;
    padding: 10px;
    border: 2px solid #ccc;
    margin-bottom: 5px;
}
.icon-refresh {
    opacity: 0.65;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />