Entrée angulaire directive ng-repeat mise au point à la nouvelle option ajoutée en utilisant le bouton ajouter

Question

J'ai une page html avec la question et la possibilité d'ajouter plusieurs options avec possibilité d'ajouter ou de supprimer une option.

Comment voulait définir le focus sur la zone de texte d'option nouvellement ajoutée qui a été ajouté à l'aide d'ajouter le bouton/lien

Voici le lien pour Plnkr

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

app.controller('MainCtrl', function($scope) { 
    $scope.question = { question: 'what is your name', 
    options: [{option:'Red', code: '1'}, {option:'Blue', code: '2'}, 
    {option:'Green', code: '3'},{option:'Black', code: '4'}]}; 
}); 

app.directive('myDirective', function(){ 
    return { 
     link: function(scope, element, attrs, ctrls) { 

       function Option() { 
        this.option = ''; 
        this.code = ''; 
       } 

       scope.addOption = function(index) { 
        var existingOption = scope.question.options; 
        if (existingOption && existingOption.length) { 
         var newOption = new Option(index + 1); 
         scope.question.options.splice(index + 1, 0, newOption); 
        } 
       } 

       scope.removeOption = function (index) { 
        if (index > -1) { 
         scope.question.options.splice(index, 1); 
        } 
       } 
      }, 
      restrict: 'AE', 
      scope: { 
       question: "=" 
      }, 
      templateUrl: 'question.html' 
     }; 
}); 

Answer 1

Vous pouvez créer une directive mise au point automatique qui donnera mise au point à un élément lors de sa création:

.directive('autofocus', function($timeout) { 
    return { 
     link: function(scope, element, attrs) { 
      $timeout(function() { 
       element.focus(); 
      }); 
     } 
    } 
}); 

Puis, en question.html ajoutez l'attribut de mise au point à l'entrée:

<input type="text" autofocus class="form-control... /> 

http://plnkr.co/edit/xW17yIgEaKS0oX4wVj23?p=preview