javascript - Manually set the focus on input element in angular js -

-

i create 1 input element , on click show list of items after selecting item list hide.

but focus not on element down,

so want manually set focus on input element when radio button list hide.

here use following code,

view

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

directive

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

please me solve issue.

you wrong use function scope.$watch. scope.$watch used track changes in $scope.

see detail explanation.

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


Comments

Post a Comment

Popular posts from this blog

ios - Is 'init' forbidden as *part* of a variable name? -

-
i spent 3 hours debugging error , in end narrowed down (i think) variable name. i using initmonths (initial months) caused unpredicatable errors when changed imonths worked! i can understand preventing use of init on it's own surprised if prevented part of variable name. bug or feature? it's not bug if it's related name being overlap. there's part of arc used know when retain counts should updated, , may running that. similar rules apply use new @ start of names (for same reason). it's easy , wise steer clear of using init @ start of names unless it's init function. i can imagine issue related arc getting involved shouldn't , takes while called shouldn't, weird. i expect issue else , name change had other effect. worst case means have memory issue , changing name has changed memory footprint of code you've moved bug somewhere else (or along lines).
Read more

javascript - Why Selenium can't find an element that is graphically visible -

-
i'm using selenium test appllication running on firefox browser, when want click on button selenium, don't find it. find strange since can see element eye. have tried multiple method worked other exemple : wait.until(expectedconditions.visibilityofelementlocated(by)) wait.until(expectedconditions.presenceofelementlocated(by)); (i use xpath in path variable, , i'm sure correct) setting implictlywait on driver putting thread.sleep(1000) then again, post here because don't understand why selenium not see element diplayed on browser. important information maybe giving me proper answer html dom dynamically generate websocket triggered javascript event. edit 1: <button type="button" class="btn btn-xs btn-block btn-stroke" id="252_button"> delete </button> the element i'm trying access. use xpath it. it's not in iframe element. to access element did method supposed find , click on giving xpath in para...
Read more

angular - Angular2 Router: Cannot find primary outlet to load 'HomeComponent' -

-
tried switch new router in version "@angular/router": "3.0.0-beta.2" in combination "@angular/*": "2.0.0-rc.4", following official docs on componentrouter. however, i'm facing issue when trying load app default homecomponent: cannot find primary outlet load 'homecomponent' it seems has using templateurl , external html file instead of using inline template style. homecomponent not shown in window , error printed console. however, when use link home component gets shown second hand. as change from templateurl: 'home.html' to template: '<router-outlet></router-outlet>' error gone, homecomponent shown , routing works expected. is known issue? work using templateurl? there have respect work? the problem was, due app loading screen, <router-outlet></router-outlet> did not exist yet, due race condition. if need hide html part containing outlet, use [hidden] instead o...
Read more