Giriş alanına odak nasıl ayarlanır?

AngularJS'de giriş alanına odaklanmanın 'Açısal yolu' nedir?

Daha spesifik gereksinimler:

1. Bir Modal açıldığında, <input>bu Modal içinde önceden tanımlanmış bir odağa odaklanın .
2. Her zaman <input>görünür hale gelir (örneğin, bazı düğmelere tıklayarak), odaklanın.

Ben ilk şartı sağlamak için çalıştı ile autofocus, ancak bu Modal ilk kez açıldığında ve yalnızca belirli tarayıcılarda (Firefox bu işi yapmaz mesela) sadece çalışır.

Herhangi bir yardım takdir edilecektir.

1. Bir Modal açıldığında, bu Modal içindeki önceden tanımlanmış bir <input> öğesine odaklanın.

Bir yönerge tanımlayın ve öğeye ne zaman odaklanacağını bilmesi için bir özelliği / tetikleyiciyi izlemesini sağlayın:

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

Modalın oluşturulmasına zaman tanımak için $ zaman aşımı gerekli görünmektedir.

'2.' <input> öğesi her görüntülendiğinde (örneğin, bazı düğmelere tıklayarak), odağı ayarlayın.

Esasen yukarıdaki gibi bir yönerge oluşturun. Scope özelliğinin bazılarını izleyin ve gerçek olduğunda (ng-click işleyicinizde ayarlayın), yürütün element[0].focus(). Kullanım durumunuza bağlı olarak, bunun için $ zaman aşımına ihtiyacınız olabilir veya olmayabilir:

<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

Güncelleme 7/2013 : Birkaç kişinin orijinal izolat kapsam direktiflerimi kullandığını ve gömülü girdi alanlarıyla (yani moddaki bir girdi alanı) sorun yaşadığını gördüm. Yeni bir kapsamı olmayan (veya muhtemelen yeni bir çocuk kapsamı) olmayan bir direktif, ağrının bir kısmını hafifletmelidir. Bu yüzden yukarıdaki yanıtı izolat kapsamlarını kullanmamak için güncelledim. Orijinal cevap aşağıdadır:

Bir izolat kapsamı kullanarak 1. için orijinal cevap:

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

Dalgıç .

Bir izolat kapsamı kullanarak 2. için orijinal cevap:

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

Dalgıç .

Yönergede trigger / focusInput özelliğini sıfırlamamız gerektiğinden, '=' iki yönlü veri bağlama için kullanılır. İlk yönergede '@' yeterliydi. Ayrıca, @ @ kullanırken tetikleyici değerini "true" ile karşılaştırdığımızdan, @ her zaman bir dizeyle sonuçlandığını unutmayın.

(EDIT: Bu açıklamanın altına güncellenmiş bir çözüm ekledim)

Mark Rajcok adam ... ve onun cevabı geçerli bir cevaptır, ancak etmiştir bir kusuru (üzgün Mark) vardı ...

... Girişe odaklanmak için boolean'ı kullanmayı deneyin, ardından girişi bulanıklaştırın, daha sonra girişi tekrar odaklamak için kullanmayı deneyin. Boole değerini false değerine, ardından $ digest değerine sıfırlamadığınız ve tekrar true değerine sıfırlamadığınız sürece çalışmaz. İfadenizde dize karşılaştırması kullansanız bile, dizeyi başka bir şeye ($ digest), sonra da geri değiştirmeye zorlayacaksınız. (Bu, bulanıklaştırma olay işleyicisi ile giderildi.)

Bu alternatif çözümü öneriyorum:

Angular'ın unutulmuş özelliği olan bir olay kullanın.

Ne de olsa JavaScript olayları çok seviyor. Etkinlikler doğası gereği gevşek bir şekilde birleştirilmiştir ve daha da iyisi, $ özeti için başka bir $ saat eklemekten kaçınırsınız.

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

Şimdi bunu şu şekilde kullanabilirsiniz:

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

ve sonra uygulamanızın herhangi bir yerinde ...

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

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

Bu harika, çünkü böyle bir şeyle her türlü şeyi yapabilirsiniz. Birincisi, zaten var olan olaylara bağlanabilirsiniz. Başka bir şey ise, uygulamanızın farklı bölümlerinin uygulamanızın diğer bölümlerinin abone olabileceği yayınlama olayları sunarak akıllıca bir şeyler yapmaya başlarsınız.

Her neyse, bu tür şeyler bana "olay güdümlü" diye bağırıyor. Açısal geliştiriciler olarak, kapsam şekilli mandalları olay şekli deliklerine çekiçlemek için gerçekten çok çalışıyoruz.

En iyi çözüm mü? Bilmiyorum. Bu bir çözüm.

Güncellenmiş Çözüm

@ ShimonRachlenko'nun aşağıdaki yorumundan sonra, bunu yapma yöntemimi biraz değiştirdim. Şimdi bir hizmet ve "perde arkasında" bir olay işleyen bir direktif kombinasyonu kullanın:

Bunun dışında, yukarıda belirtilen aynı prensip.

İşte hızlı bir demo Plunk

kullanım

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

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

Kaynak

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

İhtiyacınız olan tek şey bu olduğunda aşırı derecede karmaşık diğer cevapları buldum

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

kullanımı

<input name="theInput" auto-focus>

Zaman aşımını dom'daki şeylerin işlenmesine izin vermek için kullanıyoruz, sıfır olmasına rağmen, en azından bunu bekliyor - bu şekilde modals'da çalışıyor ve ne de değil

HTML'nin bir özelliği vardır autofocus.

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

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

Açısal olarak yerleşik jqlite işlevselliğini de kullanabilirsiniz.

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

Bu iyi çalışıyor ve giriş kontrolüne odaklanmanın açısal bir yolu

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

Bu, işi yapmanın saf bir açısal yolu olmamasına rağmen, sözdizimi açısal stili takip eder. Jquery, Angular (jQLite => JQuery Light) kullanarak dolaylı ve doğrudan DOM'ya rol oynar.

Gerekirse, bu kod, elemanın doğrudan erişilebilir olduğu basit bir açısal direktif içine kolayca yerleştirilebilir.

$ Timeout'un öğeyi yaratıma odaklamanın iyi bir yolu olduğunu düşünmüyorum. Açısal belgelerin bulanık derinliklerinden çıkarılan yerleşik açısal işlevselliği kullanan bir yöntem. Bağlantı öncesi ve bağlantı sonrası işlevleri için "link" özelliğinin "pre" ve "post" olarak nasıl bölünebileceğine dikkat edin.

Çalışma Örneği: 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 />

Tam Açısal JS Yönergesi Dokümanları: https://docs.angularjs.org/api/ng/service/$compile

İşte benim orijinal çözümüm:

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

Ve HTML:

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

Bu ne yapar:

Ng-show ile görünür hale geldiğinde girişi odaklar. Burada $ watch veya $ kullanamazsınız.

Tıpkı son zamanlarda olduğu gibi iki yönlü bir bağlayıcı odaklama talimatı yazdım.

Odak yönergesini şu şekilde kullanabilirsiniz:

<input focus="someFocusVariable">

SomeFocusVariable kapsam değişkeni yaparsanız trueDenetleyicinizin herhangi bir yerinde , giriş odaklanır. Ve sonra girdinizi "bulanıklaştırmak" istiyorsanız, someFocusVariable öğesi false olarak ayarlanabilir. Mark Rajcok'un ilk cevabı gibi ama iki yönlü bağlayıcı.

İşte yönerge:

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

Kullanımı:

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

İşte keman:

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

Angular'ı Bootstrap eklentisi ile kullananlar için:

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

openedKalıcı örneğin vaadine girebilirsiniz :

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

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

Genel bir ifade kullanmayı yararlı buldum. Bu şekilde, giriş metni geçerli olduğunda odağı otomatik olarak taşıma gibi şeyler yapabilirsiniz

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

Veya kullanıcı sabit uzunluk alanını tamamladığında otomatik olarak odaklan

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

Ve elbette yükten sonra odaklanın

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

Direktifin kodu:

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

Bir zombi diriltmek veya kendi direktifimi takmamak (tamam yaptığım şey tam olarak bu):

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

İlk olarak, odaklanmanın resmi bir yolu 1.1 için yol haritasıdır . Bu arada, ayar odağını uygulamak için bir yönerge yazabilirsiniz.

İkinci olarak, bir öğe görünür hale geldikten sonra odağı ayarlamak için şu anda bir çözüm gerekiyor. Bir öğeyle öğe odağı () öğesine yapılan aramayı ertelemeniz yeterlidir $timeout.

Aynı denetleyici-değiştirir-DOM sorunu odak, bulanıklık ve seçim için mevcut olduğundan, bir ng-targetyönerge olmasını öneriyorum :

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

Açısal iş parçacığı burada: http://goo.gl/ipsx4 ve daha fazla ayrıntı burada bloglandı: http://goo.gl/4rdZa

Aşağıdaki yönergede, .focus()denetleyicinizin içinde ng-targetözniteliğiniz tarafından belirtilen bir işlev oluşturulur . (A .blur()ve .select()çok oluşturur .) Demo: http://jsfiddle.net/bseib/WUcQX/

Kendi direktifinizi oluşturmak yerine, bir odaklamayı gerçekleştirmek için javascript işlevlerini kullanmak mümkündür.

İşte bir örnek.

Html dosyasında:

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

Bir dosya javascriptinde, örneğin odağı etkinleştirmek istediğiniz bir denetleyicide:

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

Eğer sadece bir tıklamayla kontrol edilen basit bir odak istiyorsanız.

Html:

<input ut-focus="focusTigger">

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

Direktif:

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

Modals ile iyi çalışan basit bir tane:

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

        link: function (scope, element, attrs)
        {


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



        }
    };
}])

Misal

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

Sadece postLinking'te dekore edilmiş öğeye odaklanmaya zorlayan bir yönerge oluşturabilirsiniz:

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

Sonra html'nizde:

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

PostLinking yalnızca HTML işlemede gerçekleştiğinden, bu modlar ve ng-if değiştirilmiş öğeler için çalışır, ng-show için değil.

Mark ve Blesh'in harika cevapları var; Ancak, Mark'ın Blesh'in işaret ettiği bir kusur var (uygulamak için karmaşık olmanın yanı sıra) ve Blesh'ın cevabının, gerçekten ihtiyaç duyduğu tek şey bir önyükleme için ön talebe odak isteği göndermekle ilgili bir hizmet oluşturmada anlamsal bir hata olduğunu hissediyorum. tüm direktifler dinleyene kadar etkinliği geciktirir.

İşte burada yaptığım şey, Blesh'ın cevabından çok şey çaldı, ancak denetleyici olayının anlamını ve "yük sonrası" hizmetini ayrı tutan şey.

Bu, kontrolör olayının sadece belirli bir öğeye odaklanmaktan başka şeyler için kolayca bağlanmasına izin verir ve aynı zamanda "gerektiğinde" pek çok durumda bulunmayabilecekse "yükleme sonrası" işlevselliğinin ek yüküne neden olur.

kullanım

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

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

  afterLoad(notifyControllerEvent);
});

Kaynak

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

Bu da kullanılabilir ngModelController. 1.6+ ile çalışma (eski sürümlerle bilmiyorum).

HTML

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

JS

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

-

Not: Bağlama bağlı olarak, bir zaman aşımı işlevini sarmanız gerekebilir.

NB²: Kullanırken controllerAsbu neredeyse aynı. Sadece JS name="myForm"ile değiştirin .name="vm.myForm"vm.myForm.myText.$$element.focus();

Muhtemelen, ES6 yaşındaki en basit çözüm.

Aşağıdaki bir liner yönergesinin eklenmesi HTML 'autofocus' özelliğini Angular.js üzerinde etkili hale getirir.

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

Artık HTML5 otomatik odaklama sözdizimini şu şekilde kullanabilirsiniz:

<input type="text" autofocus>

Burada sadece bir acemi, ama ben bu yönerge ile bir ui.bootstrap.modal çalışmak mümkün oldu :

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

ve $ modal.open yönteminde, odağın nereye yerleştirilmesi gerektiğini belirten öğeyi belirtmek için kullandım:

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

şablonda bu var:

<input id="myInputId" focus />

Aşağıdaki direktif benim için hile yaptı. Giriş için aynı otomatik netleme html özelliğini kullanın.

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

ModalInstance kullanıyorsanız ve nesneye sahipseniz, modal açıldıktan sonra eylemler yapmak için "then" kullanabilirsiniz. Eğer modalInstance kullanmıyorsanız ve modal açmak için sabit kodlanmışsa olayı kullanabilirsiniz. $ Zaman aşımı iyi bir çözüm değildir.

Şunları yapabilirsiniz (Bootstrap3):

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

ModalInstance adresinde kodu açık moddan sonra nasıl yürüteceğinize bakabilirsiniz.

Bu şekilde $ zaman aşımı kullanmayın, $ zaman aşımı 0, 1, 10, 30, 50, 200 veya daha fazla olabilir, bu istemci bilgisayara ve modal açma işlemine bağlı olacaktır.

$ Timeout kullanmayın, yöntem ne zaman odaklanabileceğinizi söylesin;)

Umarım bu yardımcı olur! :)

Yönerge şablonunda istenen odak öğesi enjekte edilirse, önceki yanıtın tümü çalışmaz. Aşağıdaki yönerge hem basit öğeye hem de yönerge enjekte edilen öğeye uygundur (bunu daktiloda yazdım ). iç odaklanabilir eleman için seçici kabul eder. sadece self elemente odaklanmanız gerekiyorsa - direktife herhangi bir selector parametresi göndermeyin:

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

}

basit eleman için kullanım örneği:

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

iç eleman için kullanım örneği (genellikle şablonlu direktif gibi dinamik enjekte edilen eleman için):

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

"input" yerine herhangi bir jQuery selector kullanabilirsiniz

Mark Rajcok'un focusMe yönergesini bir öğede birden çok odak için çalışacağım.

HTML:

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

AngularJs Kontrol Cihazında:

$scope.myInputFocus= true;

AngulaJS Direktifi:

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

Daha iyi bir çözüm arayıp bulmadıktan sonra bu tartışmaya katkıda bulunmak istiyorum.

Kriterler: 1. Yeniden kullanılabilirliği artırmak için çözüm ana denetleyici kapsamından bağımsız olmalıdır. 2. Bazı durumları izlemek için $ watch kullanmaktan kaçının, bu hem yavaştır, sindirim döngüsünün boyutunu arttırır ve testi zorlaştırır. 3. Özet döngüsünü tetiklemek için $ timeout veya $ scope. $ Uygulamak () kullanmaktan kaçının. 4. Direktifin açık kullanıldığı elemanın içinde bir giriş elemanı bulunmaktadır.

En çok sevdiğim çözüm bu:

Direktif:

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

Umarım bu birisine yardım eder!

Çok kolay .. bunu dene

html

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

javaScript

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

Belirli bir öğeye odaklanmak istiyorsanız, aşağıdaki yaklaşımı kullanabilirsiniz.

1. Adlı bir hizmet oluşturun 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. Aramak istediğiniz yerden denetleyiciye enjekte edin.

3. Bu servisi arayın.

Direktifin gereksiz olduğunu düşünüyorum. Gerekli öğeyi seçmek için HTML kimliği ve sınıf niteliklerini kullanın ve hizmetin odağı (veya jQuery eşdeğerlerini) uygulamak için document.getElementById veya document.querySelector uygulamasını kullanmasını sağlayın.

İşaretleme, seçim için kimlik / sınıf eklenmiş standart HTML / açısal yönergelerdir

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

Denetleyici yayınları etkinliği

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

UI hizmeti querySelector kullanıyorsa - birden fazla eşleşme varsa (sınıf nedeniyle) varsa, yalnızca ilkini döndürür

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

Özet döngüsünü zorlamak için $ timeout () kullanmak isteyebilirsiniz

Biraz kahve atıyorum.

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