AngularJS - Mise au point d'un élément d'entrée lorsqu'une case est cochée

Est-il une manière plus propre de déléguer le focus à un élément quand une case est cliqué. Voici la sale version que j'ai piraté:

HTML

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-change="toggled()">
    <input id="name">
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $timeout) {
    $scope.value = "Something";
    $scope.toggled = function() {
        console.debug('toggled');
        $timeout(function() {
            $('#name').focus();
        }, 100);
    }
}

JSFiddle: http://jsfiddle.net/U4jvE/8/

source d'informationauteur kolrie

  1. 17

    comment à ce sujet ? plunker 

     $scope.$watch('isChecked', function(newV){
      newV && $('#name').focus();
    },true);

    @asgoth et @Mark Rajcok sont corrects. Nous devrions utiliser la directive. J'ai été paresseux.

    Ici est la directive version. plunker Je pense qu'une bonne raison de le faire que la directive est que vous pouvez réutiliser cette chose.

    donc dans votre code html, vous pouvez simplement assigner différentes des modaux différents ensembles

    <input type="checkbox" ng-model="isCheckedN">
<input xng-focus='isCheckedN'>


directive('xngFocus', function() {
    return function(scope, element, attrs) {
       scope.$watch(attrs.xngFocus, 
         function (newValue) { 
            newValue && element.focus();
         },true);
      };    
});
  2. 7

    Une autre directive de mise en œuvre (qui ne nécessite pas de jQuery), et de l'emprunt de certains de @maxisam code:

    myApp.directive('focus', function() {
    return function(scope, element) {
       scope.$watch('focusCheckbox', 
         function (newValue) { 
            newValue && element[0].focus()
         })
    }      
});

    HTML:

    <input type="checkbox" ng-model="focusCheckbox">
<input ng-model="name" focus>

    Violon.

    Depuis cette directive ne crée pas un isolat portée (ou un enfant), de la directive suppose que le champ d'application a un focusCheckbox bien défini.

  3. 5

    Si vous voulez le rendre plus intéressant, et de soutien pour toute expression à évaluer (pas seulement les variables), vous pouvez le faire:

    app.directive('autofocusWhen', function ($timeout) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.autofocusWhen, function(newValue){
                if ( newValue ) {
                    $timeout(function(){
                        element.focus();
                    });
                }
            });
        }
     };
});

    Et votre code html, peut être un peu plus découplé, comme ça:

    <input type="checkbox" ng-model="product.selected" />
{{product.description}}
<input type="text" autofocus-when="product.selected" />
  4. 0

    D'une façon plus propre est d'utiliser une directive pour effectuer la bascule:

    app.directive('toggle', function() {
   return {
      restrict: 'A',
      scope: {
         selector: '='
      },
      link: function(scope, element, attrs) {
          element.on('change', function() {
              $(scope.selector).focus();
              scope.$apply();
          });
      }
   }:
});

    Votre html serait qqch comme:

    <input type='checkbox' toggle selector='#name'>