एंगुलरजेएस - चेकबॉक्स पर क्लिक होने पर इनपुट तत्व पर फ़ोकस करना

Question

क्या चेकबॉक्स क्लिक होने पर किसी तत्व पर फ़ोकस करने का एक क्लीनर तरीका है।

एचटीएमएल

<div ng-controller="MyCtrl"> 
    <input type="checkbox" ng-change="toggled()"> 
    <input id="name"> 
</div> 

जावास्क्रिप्ट

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

function MyCtrl($scope, $timeout) { 
    $scope.value = "Something"; 
    $scope.toggled = function() { 
     console.debug('toggled'); 
     $timeout(function() { 
      $('#name').focus(); 
     }, 100); 
    } 
} 

JSFiddle: http://jsfiddle.net/U4jvE/8/

Answer 1

कैसे इस एक के बारे में यहाँ गंदा संस्करण मैं काट दिया है? plunker

$scope.$watch('isChecked', function(newV){ 
     newV && $('#name').focus(); 
    },true); 

@asgoth और @ मार्क राजकोक सही हैं। हमें निर्देश का उपयोग करना चाहिए। मैं सिर्फ आलसी था।

यहां निर्देश संस्करण है। plunker मुझे लगता है कि इसे निर्देश के रूप में बनाने का एक अच्छा कारण यह है कि आप इस बात का पुन: उपयोग कर सकते हैं।

app.directive('toggle', function() { 
    return { 
     restrict: 'A', 
     scope: { 
     selector: '=' 
     }, 
     link: function(scope, element, attrs) { 
      element.on('change', function() { 
       $(scope.selector).focus(); 
       scope.$apply(); 
      }); 
     } 
    }: 
}); 

अपने HTML sth चाहते किया जाएगा:

तो अपने html में तुम सिर्फ अलग क्रियार्थ द्योतक विभिन्न सेट

<input type="checkbox" ng-model="isCheckedN"> 
<input xng-focus='isCheckedN'> 


directive('xngFocus', function() { 
    return function(scope, element, attrs) { 
     scope.$watch(attrs.xngFocus, 
     function (newValue) { 
      newValue && element.focus(); 
     },true); 
     };  
}); 

Answer 2

एक क्लीनर तरीका एक निर्देश का उपयोग करने के लिए टॉगल प्रदर्शन करने के लिए है करने के लिए प्रदान कर सकते हैं :

<input type='checkbox' toggle selector='#name'> 

Answer 3

एक अन्य निर्देश कार्यान्वयन (जिसे jQuery की आवश्यकता नहीं है), और उधार @ Maxisam के कोड के कुछ:

myApp.directive('focus', function() { 
    return function(scope, element) { 
     scope.$watch('focusCheckbox', 
     function (newValue) { 
      newValue && element[0].focus() 
     }) 
    }  
}); 

HTML:

<input type="checkbox" ng-model="focusCheckbox"> 
<input ng-model="name" focus> 

Fiddle।

चूंकि यह निर्देश एक अलग दायरा (या एक बच्चे का दायरा) नहीं बनाता है, तो निर्देश मानता है कि दायरे में focusCheckbox संपत्ति परिभाषित है।

Answer 4

आप इसे और अधिक दिलचस्प है, और किसी भी अभिव्यक्ति के लिए समर्थन बनाना चाहते हैं मूल्यांकन किया जाना (न केवल चर), तो आप ऐसा कर सकते हैं:

app.directive('autofocusWhen', function ($timeout) { 
    return { 
     link: function(scope, element, attrs) { 
      scope.$watch(attrs.autofocusWhen, function(newValue){ 
       if (newValue) { 
        $timeout(function(){ 
         element.focus(); 
        }); 
       } 
      }); 
     } 
    }; 
}); 

और अपने html थोड़ा और, decoupled की तरह हो सकता है कि:

<input type="checkbox" ng-model="product.selected" /> 
{{product.description}} 
<input type="text" autofocus-when="product.selected" />