AngularJS - Tập trung vào yếu tố đầu vào khi một hộp kiểm được nhấp vào

Question

Có cách nào rõ ràng hơn là ủy quyền lấy nét cho một phần tử khi hộp kiểm được nhấp hay không. Dưới đây là phiên bản bẩn tôi bị tấn công:

HTML

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

Javascript

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

thế nào về việc này? plunker

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

@asgoth và @Mark Rajcok là chính xác. Chúng ta nên sử dụng chỉ thị. Tôi chỉ lười biếng.

Đây là phiên bản chỉ thị. plunker Tôi nghĩ rằng một lý do chính đáng để làm cho nó như là chỉ thị là bạn có thể tái sử dụng điều này.

như vậy trong html của bạn, bạn chỉ có thể gán modals khác nhau để bộ khác nhau

<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

Một cách sạch hơn là sử dụng một chỉ thị để thực hiện chuyển đổi:

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

html của bạn sẽ được sth thích :

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

Answer 3

Thực hiện chỉ thị khác (không yêu cầu jQuery) và vay một số mã @ maxisam của:

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.

Vì chỉ thị này không tạo ra một phạm vi cô lập (hoặc phạm vi con), chỉ thị giả định phạm vi có một thuộc tính được xác định là focusCheckbox.

Answer 4

Nếu bạn muốn làm cho nó thú vị hơn, và hỗ trợ cho bất kỳ biểu hiện được đánh giá (không chỉ biến), bạn có thể làm điều này:

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

Và html của bạn có thể là một chút tách riêng hơn, như rằng:

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