Imposta la messa a fuoco dell'elemento in modo angolare

Dopo aver cercato esempi di come impostare gli elementi di messa a fuoco con angolare, ho visto che la maggior parte di loro usa alcune variabili per guardare per poi impostare la messa a fuoco, e la maggior parte di loro usa una variabile diversa per ogni campo che vogliono impostare. In una forma, con molti campi, ciò implica molte variabili diverse.

Con il modo jquery in mente, ma volendo farlo in modo angolare, ho fatto una soluzione che mettiamo a fuoco in qualsiasi funzione usando l'id dell'elemento, quindi, poiché sono molto nuovo in angolare, mi piacerebbe avere alcune opinioni se in questo modo è giusto, avere problemi, qualunque cosa, qualsiasi cosa che possa aiutarmi a farlo nel modo migliore in angolare.

Fondamentalmente, creo una direttiva che controlla un valore di ambito definito dall'utente con la direttiva, o il focusElement di default, e quando quel valore è uguale all'id dell'elemento, quell'elemento imposta il focus stesso.

angular.module('appnamehere')
  .directive('myFocus', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        if (attrs.myFocus == "") {
          attrs.myFocus = "focusElement";
        }
        scope.$watch(attrs.myFocus, function(value) {
          if(value == attrs.id) {
            element[0].focus();
          }
        });
        element.on("blur", function() {
          scope[attrs.myFocus] = "";
          scope.$apply();
        })        
      }
    };
  });

Un input che deve essere focalizzato per qualche motivo, farà in questo modo

<input my-focus id="input1" type="text" />

Qui qualsiasi elemento per mettere a fuoco:

<a href="" ng-click="clickButton()" >Set focus</a>

E la funzione di esempio che mette a fuoco:

$scope.clickButton = function() {
    $scope.focusElement = "input1";
}

È una buona soluzione in angolare? Ha problemi che con la mia scarsa esperienza non vedo ancora?

Il problema con la tua soluzione è che non funziona bene quando è legata ad altre direttive che creano un nuovo ambito, ad es ng-repeat. Una soluzione migliore sarebbe semplicemente creare una funzione di servizio che ti permetta di focalizzare gli elementi in modo imperativo all'interno dei tuoi controller o di focalizzare gli elementi in modo dichiarativo nell'html.

DEMO

JAVASCRIPT

Servizio

 .factory('focus', function($timeout, $window) {
    return function(id) {
      // timeout makes sure that it is invoked after any other event has been triggered.
      // e.g. click events that need to run before the focus or
      // inputs elements that are in a disabled state but are enabled when those events
      // are triggered.
      $timeout(function() {
        var element = $window.document.getElementById(id);
        if(element)
          element.focus();
      });
    };
  });

Direttiva

  .directive('eventFocus', function(focus) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        focus(attr.eventFocusId);
      });

      // Removes bound events in the element itself
      // when the scope is destroyed
      scope.$on('$destroy', function() {
        elem.off(attr.eventFocus);
      });
    };
  });

controllore

.controller('Ctrl', function($scope, focus) {
    $scope.doSomething = function() {
      // do something awesome
      focus('email');
    };
  });

HTML

<input type="email" id="email" class="form-control">
<button event-focus="click" event-focus-id="email">Declarative Focus</button>
<button ng-click="doSomething()">Imperative Focus</button>

A proposito di questa soluzione, potremmo semplicemente creare una direttiva e collegarla all'elemento DOM che deve ottenere il focus quando una data condizione è soddisfatta. Seguendo questo approccio evitiamo di accoppiare il controller agli ID dell'elemento DOM.

Direttiva sul codice di esempio:

gbndirectives.directive('focusOnCondition', ['$timeout',
    function ($timeout) {
        var checkDirectivePrerequisites = function (attrs) {
          if (!attrs.focusOnCondition && attrs.focusOnCondition != "") {
                throw "FocusOnCondition missing attribute to evaluate";
          }
        }

        return {            
            restrict: "A",
            link: function (scope, element, attrs, ctrls) {
                checkDirectivePrerequisites(attrs);

                scope.$watch(attrs.focusOnCondition, function (currentValue, lastValue) {
                    if(currentValue == true) {
                        $timeout(function () {                                                
                            element.focus();
                        });
                    }
                });
            }
        };
    }
]);

Un possibile utilizzo

.controller('Ctrl', function($scope) {
   $scope.myCondition = false;
   // you can just add this to a radiobutton click value
   // or just watch for a value to change...
   $scope.doSomething = function(newMyConditionValue) {
       // do something awesome
       $scope.myCondition = newMyConditionValue;
  };

});

HTML

<input focus-on-condition="myCondition">

Mi piace evitare le ricerche DOM, gli orologi e gli emettitori globali quando possibile, quindi utilizzo un approccio più diretto. Usa una direttiva per assegnare una semplice funzione che si concentri sull'elemento direttiva. Quindi chiamare quella funzione ovunque sia necessario nell'ambito del controller.

Ecco un approccio semplificato per collegarlo all'ambito. Vedere lo snippet completo per la gestione della sintassi controller-as.

Direttiva:

app.directive('inputFocusFunction', function () {
    'use strict';
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            scope[attr.inputFocusFunction] = function () {
                element[0].focus();
            };
        }
    };
});

e in html:

<input input-focus-function="focusOnSaveInput" ng-model="saveName">
<button ng-click="focusOnSaveInput()">Focus</button>

o nel controller:

$scope.focusOnSaveInput();

angular.module('app', [])
  .directive('inputFocusFunction', function() {
    'use strict';
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        // Parse the attribute to accomodate assignment to an object
        var parseObj = attr.inputFocusFunction.split('.');
        var attachTo = scope;
        for (var i = 0; i < parseObj.length - 1; i++) {
          attachTo = attachTo[parseObj[i]];
        }
        // assign it to a function that focuses on the decorated element
        attachTo[parseObj[parseObj.length - 1]] = function() {
          element[0].focus();
        };
      }
    };
  })
  .controller('main', function() {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<body ng-app="app" ng-controller="main as vm">
  <input input-focus-function="vm.focusOnSaveInput" ng-model="saveName">
  <button ng-click="vm.focusOnSaveInput()">Focus</button>
</body>

Modificato per fornire ulteriori spiegazioni sul motivo di questo approccio e per estendere lo snippet di codice per l'utilizzo come controller.

Puoi provare

angular.element('#<elementId>').focus();

per es.

angular.element('#txtUserId').focus();

sta funzionando per me.

Un'altra opzione sarebbe quella di utilizzare l'architettura pub-sub incorporata di Angular per notificare alla tua direttiva di concentrarsi. Simile agli altri approcci, ma non è quindi direttamente legato a una proprietà e ascolta invece il suo ambito per una particolare chiave.

Direttiva:

angular.module("app").directive("focusOn", function($timeout) {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      scope.$on(attrs.focusOn, function(e) {
        $timeout((function() {
          element[0].focus();
        }), 10);
      });
    }
  };
});

HTML:

<input type="text" name="text_input" ng-model="ctrl.model" focus-on="focusTextInput" />

controller:

//Assume this is within your controller
//And you've hit the point where you want to focus the input:
$scope.$broadcast("focusTextInput");

Ho preferito usare un'espressione. Questo mi consente di fare cose come concentrarmi su un pulsante quando un campo è valido, raggiunge una certa lunghezza e, naturalmente, dopo il caricamento.

<button type="button" moo-focus-expression="form.phone.$valid">
<button type="submit" moo-focus-expression="smsconfirm.length == 6">
<input type="text" moo-focus-expression="true">

In una forma complessa, ciò riduce anche la necessità di creare variabili di ambito aggiuntive ai fini della focalizzazione.

Vedi https://stackoverflow.com/a/29963695/937997