Angular js directive controller function bind issue when using ng repeat

Question

I have a code like this

JS

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

app.controller('ctrl',function($scope){
  $scope.hello = "hello"; 
  $scope.check = [1,2];

  $scope.focus1 = function(){
    $scope.setFocusInput0();    
  };
  $scope.focus2 = function(){
    $scope.setFocusInput1();    
  };
});

app.directive('rfocus',function(){
  return {
    restrict: 'A',
    controller: function($scope, $element, $attrs){
        var fooName = 'setFocus' + $attrs.rfocus; 
        $scope[fooName] = function(){alert(1)
            $element.focus();                
        } 
    },
  }    
});

HTML

<div ng-app="app" ng-controller="ctrl">
<input ng-repeat="i in check" type="checkbox" rfocus="Input{{$index}}"/>
<button ng-click="focus1()">set focus 1</button>
<button ng-click="focus2()">set focus 2</button>

http://jsfiddle.net/2PJMQ/29/

When i removing ng-repeat and place checkboxes in static its working fine.

Where 's your setFocusInput0 function and setFocusInput1 function in your main controller? — David Wei
– David Wei, Commented Dec 4, 2017 at 6:43

Slava Utesinov · Accepted Answer · 2017-12-04 11:12:21Z

At case of using directive with ng-repeat, you will have several nested scopes, so you should make some changes(plunker):

app.directive('rfocus',function(){
    return {
        scope:{
            rfocus:'@'
        },
        restrict: 'A',
        controller: function($scope, $element, $attrs){
            var fooName = 'setFocus' + $scope.rfocus;                          
            $scope.$parent.$parent[fooName] = function(){
                alert(1)
                $element.focus();                
            } 
        },
    }    
});

Or this variant:

<input ng-repeat="i in check" type="checkbox" rfocus="'Input' + $index"/>

Javascript:

app.directive('rfocus',function(){
    return {
        restrict: 'A',
        controller: function($scope, $element, $attrs){        
            var fooName = 'setFocus' + $scope.$eval($attrs.rfocus);
            $scope.$parent.$parent[fooName] = function(){
                    alert(1)
                $element.focus();                
            } 
        },
    }    
});

But both of them will not work at plain situation. I think better solution is to change initial approach. You should pass to each directive it's identifier, i.e. rfocus and reference to variable focus, which determines current focused element, so you can change this variable in your controller and then directives will reflect it:

HTML:

<div ng-app="app" ng-controller="ctrl">
    <input ng-repeat="i in check" type="checkbox" rfocus="{{$index}}" focus='{{focus}}'/>
    <button ng-click="focusClick(0)">set focus 1</button>
    <button ng-click="focusClick(1)">set focus 2</button>
    <input type="checkbox" rfocus="2" focus='{{focus}}'/>
    <button ng-click="focusClick(2)">set focus 3</button>
</div>

Javascript:

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

app.controller('ctrl',function($scope){
    $scope.hello = "hello"; 
    $scope.check = [1,2];
    $scope.focus = 0;

    $scope.focusClick = function(index){    
        $scope.focus = index;
    };    
});

app.directive('rfocus',function(){
    return {        
        scope:{
           rfocus:'@',
           focus:'@'
        },
        restrict: 'A',
        controller: function($scope, $element, $attrs){            
            $scope.$watch('focus', function(){                  
                if($scope.rfocus == $scope.focus)
                    $element.focus();                
            }); 
        },
    }    
});

Collectives™ on Stack Overflow

Angular js directive controller function bind issue when using ng repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related