Bagaimana cara mengatur fokus pada bidang input?

Apa itu 'Cara sudut' untuk menetapkan fokus pada bidang input di AngularJS?

Persyaratan yang lebih spesifik:

1. Ketika Modal dibuka, tetapkan fokus pada yang telah ditentukan <input>di dalam Modal ini.
2. Setiap kali <input>menjadi terlihat (misalnya dengan mengklik beberapa tombol), tetapkan fokus padanya.

Saya mencoba untuk mencapai persyaratan pertama dengan autofocus, tapi ini hanya bekerja jika Modal dibuka untuk pertama kalinya, dan hanya dalam browser tertentu (misalnya di Firefox itu tidak bekerja).

Bantuan apa pun akan dihargai.

1. Saat Modal dibuka, setel fokus pada <input> yang telah ditentukan di dalam Modal ini.

Tetapkan arahan dan minta $ tonton properti / pemicu sehingga tahu kapan harus memfokuskan elemen:

Name: <input type="text" focus-me="shouldBeOpen">

app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment, set attribute value to 'false'
            // on blur event:
            element.bind('blur', function () {
                console.log('blur');
                scope.$apply(model.assign(scope, false));
            });
        }
    };
}]);

Plunker

$ Timeout tampaknya diperlukan untuk memberikan modal waktu untuk merender.

'2.' Setiap kali <input> menjadi terlihat (misalnya dengan mengklik beberapa tombol), atur fokus padanya.

Buat arahan dasarnya seperti yang ada di atas. Tonton beberapa properti lingkup, dan ketika itu menjadi benar (atur di pawang ng-klik Anda), jalankan element[0].focus(). Bergantung pada kasus penggunaan Anda, Anda mungkin perlu atau tidak perlu $ timeout untuk yang ini:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focusMe, function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});

Plunker

Pembaruan 7/2013 : Saya telah melihat beberapa orang menggunakan arahan lingkup isolat asli saya dan kemudian memiliki masalah dengan bidang input yang disematkan (yaitu, bidang input dalam modal). Arahan tanpa ruang lingkup baru (atau mungkin ruang lingkup anak baru) harus mengurangi rasa sakit. Jadi di atas saya memperbarui jawabannya untuk tidak menggunakan cakupan isolasi. Di bawah ini adalah jawaban asli:

Jawaban orisinal untuk 1., menggunakan ruang lingkup isolasi:

Name: <input type="text" focus-me="{{shouldBeOpen}}">

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '@focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === "true") { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
    }
  };
});

Plunker .

Jawaban orisinal untuk 2., menggunakan ruang lingkup isolasi:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" focus-me="focusInput">
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
});

Plunker .

Karena kita perlu mereset properti trigger / focusInput dalam direktif, '=' digunakan untuk penyatuan data dua arah. Dalam arahan pertama, '@' sudah cukup. Perhatikan juga bahwa ketika menggunakan '@' kami membandingkan nilai pemicu ke "true" karena @ selalu menghasilkan string.

(EDIT: Saya telah menambahkan solusi yang diperbarui di bawah penjelasan ini)

Mark Rajcok adalah pria ... dan jawabannya adalah jawaban yang valid, tetapi memiliki cacat (Mark maaf) ...

... Coba gunakan boolean untuk fokus pada input, lalu buramkan input, lalu coba gunakan untuk memfokuskan input lagi. Ini tidak akan berfungsi kecuali jika Anda mengatur ulang boolean ke false, lalu $ digest, lalu reset kembali ke true. Bahkan jika Anda menggunakan perbandingan string dalam ekspresi Anda, Anda akan dipaksa untuk mengubah string ke sesuatu yang lain, $ digest, lalu ubah kembali. (Ini telah diatasi dengan pengendali acara blur.)

Jadi saya mengusulkan solusi alternatif ini:

Gunakan acara, fitur Angular yang terlupakan.

Bagaimanapun, JavaScript menyukai acara. Acara secara inheren digabungkan secara longgar, dan bahkan lebih baik, Anda menghindari menambahkan $ menonton lain ke $ digest Anda.

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e) {
          elem[0].focus();
      });
   };
});

Jadi sekarang Anda bisa menggunakannya seperti ini:

<input type="text" focus-on="newItemAdded" />

dan kemudian di mana saja di aplikasi Anda ...

$scope.addNewItem = function () {
    /* stuff here to add a new item... */

    $scope.$broadcast('newItemAdded');
};

Ini luar biasa karena Anda dapat melakukan segala macam hal dengan sesuatu seperti ini. Untuk satu, Anda bisa mengikat ke acara yang sudah ada. Untuk hal lain, Anda mulai melakukan sesuatu yang cerdas dengan meminta bagian yang berbeda dari aplikasi Anda mempublikasikan acara yang dapat diikuti oleh bagian lain dari aplikasi Anda.

Bagaimanapun, jenis hal ini berteriak "event driven" kepada saya. Saya pikir sebagai pengembang Angular kami berusaha sangat keras untuk memalu pasak berbentuk $ lingkup ke lubang bentuk acara.

Apakah ini solusi terbaik? Saya tidak tahu. Ini sebuah solusi.

Solusi Terbaru

Setelah komentar @ ShimonRachlenko di bawah, saya telah mengubah metode saya untuk melakukan ini sedikit. Sekarang saya menggunakan kombinasi layanan dan arahan yang menangani acara "di belakang layar":

Selain itu, prinsipal yang sama dijelaskan di atas.

Ini demo singkat Plunk

Pemakaian

<input type="text" focus-on="focusMe"/>

app.controller('MyCtrl', function($scope, focus) {
    focus('focusMe');
});

Sumber

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on('focusOn', function(e, name) {
        if(name === attr.focusOn) {
          elem[0].focus();
        }
      });
   };
});

app.factory('focus', function ($rootScope, $timeout) {
  return function(name) {
    $timeout(function (){
      $rootScope.$broadcast('focusOn', name);
    });
  }
});

Saya telah menemukan beberapa jawaban lain yang terlalu rumit ketika semua yang Anda butuhkan adalah ini

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

penggunaan adalah

<input name="theInput" auto-focus>

Kami menggunakan batas waktu untuk membiarkan hal-hal di dom render, meskipun nol, setidaknya menunggu untuk itu - dengan cara ini bekerja dalam modals dan yang lainnya juga

HTML memiliki atribut autofocus.

<input type="text" name="fname" autofocus>

http://www.w3schools.com/tags/att_input_autofocus.asp

Anda juga dapat menggunakan fungsionalitas jqlite bawaan sudut.

angular.element('.selector').trigger('focus');

Ini bekerja dengan baik dan cara sudut untuk memfokuskan kontrol input

angular.element('#elementId').focus()

Meskipun ini bukan cara sudut murni dalam melakukan tugas namun sintaksinya mengikuti gaya sudut. Jquery memainkan peran secara tidak langsung dan langsung mengakses DOM menggunakan Angular (jQLite => JQuery Light).

Jika diperlukan, kode ini dapat dengan mudah dimasukkan ke dalam arahan sudut sederhana di mana elemen dapat diakses secara langsung.

Saya tidak berpikir $ timeout adalah cara yang baik untuk memfokuskan elemen pada penciptaan. Berikut adalah metode yang menggunakan fungsionalitas sudut bawaan, yang digali dari kedalaman suram dokumen sudut. Perhatikan bagaimana atribut "tautan" dapat dipecah menjadi "pra" dan "pos", untuk fungsi pra-tautan dan pasca-tautan.

Contoh Kerja: http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});

<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

Dokumen Petunjuk AngularJS Lengkap: https://docs.angularjs.org/api/ng/service/$compile

Ini solusi asli saya:

plunker

var app = angular.module('plunker', []);
app.directive('autoFocus', function($timeout) {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe("autoFocus", function(newValue){
                if (newValue === "true")
                    $timeout(function(){element[0].focus()});
            });
        }
    };
});

Dan HTML:

<button ng-click="isVisible = !isVisible">Toggle input</button>
<input ng-show="isVisible" auto-focus="{{ isVisible }}" value="auto-focus on" />

Apa fungsinya:

Ini memfokuskan input karena menjadi terlihat dengan ng-show. Tidak ada penggunaan $ watch atau $ di sini.

Saya telah menulis arahan fokus mengikat dua arah, seperti halnya model baru-baru ini.

Anda dapat menggunakan arahan fokus seperti ini:

<input focus="someFocusVariable">

Jika Anda membuat variabel scope someFocusVariable true di mana saja di controller Anda, input menjadi fokus. Dan jika Anda ingin "mengaburkan" input Anda, someFocusVariable dapat disetel ke false. Ini seperti jawaban pertama Mark Rajcok tetapi dengan ikatan dua arah.

Ini adalah arahannya:

function Ctrl($scope) {
  $scope.model = "ahaha"
  $scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all.
}

angular.module('experiement', [])
  .directive('focus', function($timeout, $parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          scope.$watch(attrs.focus, function(newValue, oldValue) {
              if (newValue) { element[0].focus(); }
          });
          element.bind("blur", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=false"); 
              }, 0);
          });
          element.bind("focus", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=true");
              }, 0);
          })
      }
    }
  });

Pemakaian:

<div ng-app="experiement">
  <div ng-controller="Ctrl">
    An Input: <input ng-model="model" focus="someFocusVariable">
    <hr>
        <div ng-click="someFocusVariable=true">Focus!</div>  
        <pre>someFocusVariable: {{ someFocusVariable }}</pre>
        <pre>content: {{ model }}</pre>
  </div>
</div>

Ini biola:

http://fiddle.jshell.net/ubenzer/9FSL4/8/

Bagi mereka yang menggunakan Angular dengan plugin Bootstrap:

http://angular-ui.github.io/bootstrap/#/modal

Anda dapat mengaitkan openedjanji dengan instance modal:

modalInstance.opened.then(function() {
        $timeout(function() {
            angular.element('#title_input').trigger('focus');
        });
    });

modalInstance.result.then(function ( etc...

Saya merasa berguna untuk menggunakan ekspresi umum. Dengan cara ini Anda dapat melakukan hal-hal seperti memindahkan fokus secara otomatis ketika input teks valid

<button type="button" moo-focus-expression="form.phone.$valid">

Atau secara otomatis fokus ketika pengguna menyelesaikan bidang panjang tetap

<button type="submit" moo-focus-expression="smsconfirm.length == 6">

Dan tentu saja fokus setelah memuat

<input type="text" moo-focus-expression="true">

Kode untuk arahan:

.directive('mooFocusExpression', function ($timeout) {
    return {
        restrict: 'A',
        link: {
            post: function postLink(scope, element, attrs) {
                scope.$watch(attrs.mooFocusExpression, function (value) {

                    if (attrs.mooFocusExpression) {
                        if (scope.$eval(attrs.mooFocusExpression)) {
                            $timeout(function () {
                                element[0].focus();
                            }, 100); //need some delay to work with ng-disabled
                        }
                    }
                });
            }
        }
    };
});

Untuk tidak menghidupkan kembali zombie atau memasang arahan saya sendiri (ok itulah yang saya lakukan):

https://github.com/hiebj/ng-focus-if

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

<input focus-if />

(function() {
    'use strict';
    angular
        .module('focus-if', [])
        .directive('focusIf', focusIf);

    function focusIf($timeout) {
        function link($scope, $element, $attrs) {
            var dom = $element[0];
            if ($attrs.focusIf) {
                $scope.$watch($attrs.focusIf, focus);
            } else {
                focus(true);
            }
            function focus(condition) {
                if (condition) {
                    $timeout(function() {
                        dom.focus();
                    }, $scope.$eval($attrs.focusDelay) || 0);
                }
            }
        }
        return {
            restrict: 'A',
            link: link
        };
    }
})();

Pertama, cara resmi untuk melakukan fokus adalah pada peta jalan untuk 1.1 . Sementara itu, Anda dapat menulis arahan untuk menerapkan fokus pengaturan.

Kedua, untuk menetapkan fokus pada item setelah terlihat saat ini membutuhkan solusi. Cukup tunda panggilan Anda ke fokus elemen () dengan a $timeout.

Karena masalah kontroler-modifikasi-DOM yang sama ada untuk fokus, kabur dan pilih, saya mengusulkan memiliki ng-targetarahan:

<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>

Utas sudut di sini: http://goo.gl/ipsx4 , dan detail lainnya di-blog di sini: http://goo.gl/4rdZa

Arahan berikut akan membuat .focus()fungsi di dalam controller Anda seperti yang ditentukan oleh ng-targetatribut Anda . (Ini membuat .blur()dan .select()juga.) Demo: http://jsfiddle.net/bseib/WUcQX/

Alih-alih membuat arahan Anda sendiri, dimungkinkan untuk hanya menggunakan fungsi javascript untuk mencapai fokus.

Berikut ini sebuah contoh.

Dalam file html:

<input type="text" id="myInputId" />

Dalam file javascript, di controller misalnya, tempat Anda ingin mengaktifkan fokus:

document.getElementById("myInputId").focus();

Jika Anda hanya menginginkan fokus sederhana yang dikendalikan oleh ng-klik.

Html:

<input ut-focus="focusTigger">

<button ng-click="focusTrigger=!focusTrigger" ng-init="focusTrigger=false"></button>

Pengarahan:

'use strict'

angular.module('focus',['ng'])
.directive('utFocus',function($timeout){
    return {
        link:function(scope,elem,attr){
            var focusTarget = attr['utFocus'];
            scope.$watch(focusTarget,function(value){
                $timeout(function(){
                    elem[0].focus();
                });
            });
        }
    }
});

Sederhana yang bekerja dengan baik dengan modals:

.directive('focusMeNow', ['$timeout', function ($timeout)
{
    return {
        restrict: 'A',

        link: function (scope, element, attrs)
        {


            $timeout(function ()
            {
                element[0].focus();
            });



        }
    };
}])

Contoh

<input ng-model="your.value" focus-me-now />

Anda bisa membuat arahan yang memaksa fokus pada elemen yang didekorasi pada postLinking:

angular.module('directives')
.directive('autoFocus', function() {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            _element[0].focus();
        }
    };
});

Kemudian di html Anda:

<input type="text" name="first" auto-focus/> <!-- this will get the focus -->
<input type="text" name="second"/>

Ini akan berfungsi untuk elemen-elemen yang di-modals dan ng-if, bukan untuk ng-show karena postLinking hanya terjadi pada pemrosesan HTML.

Mark dan Blesh memiliki jawaban yang luar biasa; Namun, Mark's memiliki kekurangan yang ditunjukkan oleh Blesh (selain rumit untuk diterapkan), dan saya merasa bahwa jawaban Blesh memiliki kesalahan semantik dalam menciptakan layanan yang secara khusus tentang mengirim permintaan fokus ke frontend ketika benar-benar semua yang ia butuhkan adalah cara untuk tunda acara sampai semua arahan mendengarkan.

Jadi di sini adalah apa yang akhirnya saya lakukan yang mencuri banyak dari jawaban Blesh tetapi menjaga semantik acara controller dan layanan "after load" terpisah.

Hal ini memungkinkan acara pengontrol dengan mudah dihubungkan untuk hal-hal selain dari hanya memfokuskan elemen tertentu dan juga memungkinkan untuk menimbulkan overhead fungsi "after load" hanya jika diperlukan, yang mungkin tidak dalam banyak kasus.

Pemakaian

<input type="text" focus-on="controllerEvent"/>

app.controller('MyCtrl', function($scope, afterLoad) {
  function notifyControllerEvent() {
      $scope.$broadcast('controllerEvent');
  }

  afterLoad(notifyControllerEvent);
});

Sumber

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e, name) {
        elem[0].focus();
      });
   };
});

app.factory('afterLoad', function ($rootScope, $timeout) {
  return function(func) {
    $timeout(func);
  }
});

Ini juga memungkinkan untuk digunakan ngModelController. Bekerja dengan 1.6+ (tidak tahu dengan versi yang lebih lama).

HTML

<form name="myForm">
    <input type="text" name="myText" ng-model="myText">
</form>

JS

$scope.myForm.myText.$$element.focus();

-

NB: Tergantung dari konteksnya, Anda mungkin harus membungkus dengan fungsi timeout.

NB²: Saat menggunakan controllerAs, ini hampir sama. Cukup ganti name="myForm"dengan name="vm.myForm"dan di JS vm.myForm.myText.$$element.focus();,.

Mungkin, solusi paling sederhana pada usia ES6.

Menambahkan arahan satu liner berikut membuat atribut 'autofokus' HTML efektif di Angular.js.

.directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())}))

Sekarang, Anda bisa menggunakan sintaks autofokus HTML5 seperti:

<input type="text" autofocus>

Hanya seorang pemula di sini, tapi saya bisa membuatnya bekerja di ui.bootstrap.modal dengan arahan ini:

directives.directive('focus', function($timeout) {
    return {
        link : function(scope, element) {
            scope.$watch('idToFocus', function(value) {
                if (value === element[0].id) {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

dan dalam metode $ modal.open saya menggunakan mengikuti untuk menunjukkan elemen di mana fokus harus diletakkan:

var d = $modal.open({
        controller : function($scope, $modalInstance) {
            ...
            $scope.idToFocus = "cancelaAteste";
    }
        ...
    });

pada template saya punya ini:

<input id="myInputId" focus />

Arahan berikut ini membantu saya. Gunakan atribut html autofokus yang sama untuk input.

.directive('autofocus', [function () {
    return {
        require : 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.focus();
        }
    };
}])

Jika Anda menggunakan modalInstance dan memiliki objek, Anda dapat menggunakan "lalu" untuk melakukan tindakan setelah membuka modal. Jika Anda tidak menggunakan modalInstance, dan kode keras untuk membuka modal Anda dapat menggunakan acara tersebut. Batas waktu $ bukanlah solusi yang baik.

Anda dapat melakukannya (Bootstrap3):

$("#" + modalId).on("shown.bs.modal", function() {
    angular.element("[name='name']").focus();
});

Di modalInstance Anda dapat melihat perpustakaan bagaimana mengeksekusi kode setelah modal terbuka.

Jangan gunakan $ timeout seperti ini, $ timeout bisa 0, 1, 10, 30, 50, 200 atau lebih ini akan tergantung pada komputer klien, dan proses untuk membuka modal.

Jangan gunakan $ timeout, biarkan metode memberi tahu Anda kapan Anda bisa fokus;)

Saya harap ini membantu! :)

Semua jawaban sebelumnya tidak berfungsi jika elemen fokus yang diinginkan disuntikkan dalam template direktif. Direktif berikut cocok untuk elemen sederhana atau elemen yang disuntikkan direktif (saya menulisnya dalam naskah ). itu menerima pemilih untuk elemen fokus dalam. jika Anda hanya perlu memfokuskan elemen mandiri - jangan mengirim parameter pemilih ke arahan:

module APP.Directives {

export class FocusOnLoadDirective implements ng.IDirective {
    priority = 0;
    restrict = 'A';

    constructor(private $interval:any, private $timeout:any) {

    }

    link = (scope:ng.IScope, element:JQuery, attrs:any) => {
        var _self = this;
        var intervalId:number = 0;


        var clearInterval = function () {
            if (intervalId != 0) {
                _self.$interval.cancel(intervalId);
                intervalId = 0;
            }
        };

        _self.$timeout(function(){

                intervalId = _self.$interval(function () {
                    let focusableElement = null;
                    if (attrs.focusOnLoad != '') {
                        focusableElement = element.find(attrs.focusOnLoad);
                    }
                    else {
                        focusableElement = element;
                    }
                    console.debug('focusOnLoad directive: trying to focus');
                    focusableElement.focus();
                    if (document.activeElement === focusableElement[0]) {
                        clearInterval();
                    }
                }, 100);

                scope.$on('$destroy', function () {
                    // Make sure that the interval is destroyed too
                    clearInterval();
                });

        });
    };

    public static factory = ():ng.IDirectiveFactory => {
        let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout);
        directive.$inject = ['$interval', '$timeout'];
        return directive;
    };
}

angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory());

}

contoh penggunaan untuk elemen sederhana:

<button tabindex="0" focus-on-load />

contoh penggunaan untuk elemen dalam (biasanya untuk elemen injeksi dinamis seperti direktif dengan template):

<my-directive focus-on-load="input" />

Anda dapat menggunakan pemilih jQuery apa saja alih-alih "input"

Saya mengedit arahan fokusMe Mark Rajcok agar berfungsi untuk beberapa fokus dalam satu elemen.

HTML:

<input  focus-me="myInputFocus"  type="text">

di AngularJs Controller:

$scope.myInputFocus= true;

Petunjuk AngulaJS:

app.directive('focusMe', function ($timeout, $parse) {
    return {
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        scope.$apply(model.assign(scope, false));
                        element[0].focus();
                    }, 30);
                }
            });
        }
    };
});

Saya ingin berkontribusi dalam diskusi ini setelah mencari solusi yang lebih baik dan tidak menemukannya, harus membuatnya.

Kriteria: 1. Solusi harus independen dari lingkup pengendali induk untuk meningkatkan kegunaan kembali. 2. Hindari penggunaan $ watch untuk memantau beberapa kondisi, ini lambat, meningkatkan ukuran loop digest dan membuat pengujian lebih sulit. 3. Hindari $ timeout atau $ scope. $ Apply () untuk memicu loop intisari. 4. Elemen input hadir dalam elemen di mana Directive digunakan terbuka.

Ini adalah solusi yang paling saya sukai:

Pengarahan:

.directive('focusInput', [ function () {
    return {
        scope: {},
        restrict: 'A',
        compile: function(elem, attr) {
            elem.bind('click', function() {
                elem.find('input').focus();                
            });
        }        
    };
}]);

Html:

 <div focus-input>
     <input/>
 </div>

Saya harap ini akan membantu seseorang di luar sana!

Mudah .. coba ini

html

<select id="ddl00">  
 <option>"test 01"</option>  
</select>

javascript

document.getElementById("ddl00").focus();

Jika Anda ingin menetapkan fokus pada elemen tertentu, Anda dapat menggunakan pendekatan di bawah ini.

1. Buat layanan yang disebut focus.

   angular.module('application')
   .factory('focus', function ($timeout, $window) {
       return function (id) {
           $timeout(function () {
               var element = $window.document.getElementById(id);
               if (element)
                   element.focus();
           });
       };
   });

2. Masukkan ke dalam pengontrol dari tempat Anda ingin menelepon.

3. Panggil layanan ini.

Saya pikir arahan tidak perlu. Gunakan id HTML dan atribut kelas untuk memilih elemen yang diperlukan dan meminta layanan menggunakan document.getElementById atau document.querySelector untuk menerapkan fokus (atau setara dengan jQuery).

Markup adalah arahan HTML / sudut standar dengan id / kelas tambahan untuk seleksi

<input id="myInput" type="text" ng-model="myInputModel" />

Pengendali siaran acara

$scope.$emit('ui:focus', '#myInput');

Dalam layanan UI menggunakan querySelector - jika ada beberapa pertandingan (katakanlah karena kelas) itu hanya akan mengembalikan yang pertama

$rootScope.$on('ui:focus', function($event, selector){
  var elem = document.querySelector(selector);
  if (elem) {
    elem.focus();
  }
});

Anda mungkin ingin menggunakan $ timeout () untuk memaksakan siklus intisari

Hanya melempar kopi.

app.directive 'ngAltFocus', ->
    restrict: 'A'
    scope: ngAltFocus: '='
    link: (scope, el, attrs) ->
        scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv