Tetapkan fokus elemen dengan cara bersudut

Setelah mencari contoh bagaimana mengatur fokus elemen dengan sudut, saya melihat bahwa kebanyakan dari mereka menggunakan beberapa variabel untuk diperhatikan kemudian mengatur fokus, dan kebanyakan dari mereka menggunakan satu variabel berbeda untuk setiap bidang yang ingin mereka tetapkan fokus. Dalam bentuk, dengan banyak bidang, yang menyiratkan banyak variabel berbeda.

Dengan cara jquery dalam pikiran, tetapi ingin melakukan itu dengan cara sudut, saya membuat solusi yang kami tetapkan fokus dalam fungsi apa pun menggunakan id elemen, jadi, karena saya sangat baru dalam sudut, saya ingin mendapatkan beberapa pendapat jika jalan itu benar, punya masalah, apa pun, apa pun yang bisa membantu saya melakukan ini dengan cara yang lebih baik secara bersudut.

Pada dasarnya, saya membuat direktif yang melihat nilai cakupan yang ditentukan oleh pengguna dengan direktif, atau fokusElement default, dan ketika nilai itu sama dengan id elemen, elemen itu mengatur fokus itu sendiri.

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

Masukan yang perlu mendapatkan fokus karena alasan tertentu, akan dilakukan dengan cara ini

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

Di sini setiap elemen untuk mengatur fokus:

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

Dan contoh fungsi yang mengatur fokus:

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

Apakah itu solusi sudut yang bagus? Apakah ada masalah yang dengan pengalaman buruk saya, saya belum melihatnya?

Masalah dengan solusi Anda adalah bahwa solusi tersebut tidak berfungsi dengan baik ketika terikat pada arahan lain yang menciptakan ruang lingkup baru, misalnya ng-repeat. Solusi yang lebih baik adalah dengan membuat fungsi layanan yang memungkinkan Anda untuk memfokuskan elemen secara imperatif dalam pengontrol Anda atau untuk memfokuskan elemen secara deklaratif di html.

DEMO

JAVASCRIPT

Layanan

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

Pengarahan

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

Kontroler

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

Tentang solusi ini, kita bisa membuat arahan dan melampirkannya ke elemen DOM yang harus mendapatkan fokus ketika kondisi tertentu terpenuhi. Dengan mengikuti pendekatan ini kami menghindari penggandengan pengontrol ke ID elemen DOM.

Contoh kode direktif:

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

Penggunaan yang memungkinkan

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

Saya suka menghindari pencarian DOM, jam tangan, dan pemancar global jika memungkinkan, jadi saya menggunakan pendekatan yang lebih langsung. Gunakan direktif untuk menetapkan fungsi sederhana yang berfokus pada elemen direktif. Kemudian panggil fungsi itu di mana pun diperlukan dalam lingkup pengontrol.

Berikut adalah pendekatan yang disederhanakan untuk melampirkannya ke ruang lingkup. Lihat cuplikan lengkap untuk menangani sintaks controller-as.

Pengarahan:

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

dan dalam html:

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

atau di pengontrol:

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

Diedit untuk memberikan penjelasan selengkapnya tentang alasan pendekatan ini dan untuk memperluas cuplikan kode untuk penggunaan controller-as.

Anda dapat mencoba

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

untuk mis.

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

itu bekerja untuk saya.

Pilihan lain adalah menggunakan arsitektur pub-sub bawaan Angular untuk memberi tahu arahan Anda agar fokus. Mirip dengan pendekatan lain, tetapi kemudian tidak terkait langsung dengan properti, dan sebagai gantinya mendengarkan cakupannya untuk kunci tertentu.

Pengarahan:

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

Pengontrol:

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

Saya lebih suka menggunakan ekspresi. Ini memungkinkan saya melakukan hal-hal seperti fokus pada sebuah tombol ketika sebuah bidang valid, mencapai panjang tertentu, dan tentu saja setelah dimuat.

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

Pada bentuk yang kompleks, ini juga mengurangi kebutuhan untuk membuat variabel cakupan tambahan untuk tujuan pemfokusan.

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