Вручную установите фокус на входном элементе в угловом js

Question

Я создаю один элемент ввода, и при щелчке на дисплее отобразится список элементов после выбора любого списка элементов.

Но фокус не на этом элементе он слезть,

Так что я просто хочу, чтобы вручную установить фокус на элемент ввода, когда список радио кнопки получить шкурку.

Здесь можно использовать следующий код,

Посмотреть

<label class="item item-input item-stacked-label" ng-click="showDays()"> 
      <span class="input-label black-text">DAYS</span> 
      <span class="input-ctrl"> 
      <input type="text" id="days" readonly ng-model="data_day" focus-on="!daysflag"> 
      </span> 
</label> 
<div ng-show="daysflag"> 
      <ion-radio icon="ion-ios-checkmark" ng-model="data_day" ng-value="{{day}}" ng-repeat="day in days" ng-click="hideDayFlag()">{{day}}</ion-radio> 
</div> 

Контроллер

 $scope.days = [1, 2, 3, 4, 5, 6, 7]; 

     $scope.showDays = function() { 
      $scope.daysflag = true; 
     } 
     $scope.hideDayFlag = function() { 
      $scope.daysflag = false; 
     } 

Директива

.directive('focusOn',function($timeout) { 
      return { 
       restrict : 'A', 
       link : function($scope,$element,$attr) { 
        $scope.$watch($attr.focusOn,function(_focusVal) { 
         $timeout(function() { 
          _focusVal ? $element[0].focus() : 
           $element[0].blur(); 
         }); 
        }); 
       } 
      } 
     }); 

Пожалуйста, помогите мне решить эту проблему.

Answer 1

Вы ошибаетесь, воспользовавшись функцией scope.$watch. scope.$watch используется для отслеживания изменений в $ scope.

Подробнее explanation.

Пример по jsfiddle.

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function() { 
 
    var vm = this; 
 
    vm.isFocus = false; 
 
    }) 
 
    .directive('focusOn', function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
     focusOn: "=" 
 
     }, 
 
     link: function(scope, $element, $attr) { 
 
     scope.$watch('focusOn', function(_focusVal) { 
 
      _focusVal ? $element[0].focus() : 
 
      $element[0].blur(); 
 
     }); 
 
     $element.on("focus", function() { 
 
      scope.$applyAsync(function() { 
 
      scope.focusOn = true; 
 
      }); 
 
     }); 
 
     $element.on("blur", function() { 
 

 
      scope.$applyAsync(function() { 
 
      scope.focusOn = false; 
 
      }); 
 
     }) 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <input ng-model="vm.countRow" focus-on="vm.isFocus"> 
 
    <input type="button" value="Focus" ng-click="vm.isFocus=true"> 
 
    <input type="button" value="Blur" ng-click="vm.isFocus=false">{{vm.isFocus}} 
 
    </div> 
 
</div>