Manuell den Fokus auf Eingabeelement in Winkel js setzen

Question

Ich erstelle ein Eingabeelement und beim Klicken zeigen Sie die Liste der Elemente nach dem Auswählen einer beliebigen Objektliste get ausblenden.

Aber der Fokus ist nicht auf dieses Element nach unten raus,

Deshalb möchte ich festgelegt, nur um manuell den Fokus auf Eingabeelement, wenn Liste Radiobutton auszublenden bekommen.

Hier verwenden Sie den folgenden Code,

Ansicht

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

-Controller

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

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

Richtlinie

.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(); 
         }); 
        }); 
       } 
      } 
     }); 

Bitte helfen Sie mir, dieses Problem zu lösen.

Answer 1

Sie haben die falsche Funktion scope.$watch. scope.$watch wird verwendet, um Änderungen im $ scope zu verfolgen.

Siehe Detail explanation.

Beispiel für 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>