角度jsの入力要素に手動でフォーカスを設定

Question

入力要素を1つ作成し、アイテムリストを選択した後にアイテムリストを表示するにはget hideをクリックします。

しかし、焦点は、それが降り、その要素にない、

だから私はちょうどラジオボタンリストが非表示を取得するときに手動で入力要素にフォーカスを設定します。ここで

は

ビュー

<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>