Angular 使用 ng repeat 时 js 指令控制器函数绑定问题

Question

我有这样的代码

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/

当我删除 ng-repeat 并将复选框置于静态时，它工作正常。

Answer 1

在 ng-repeat 中使用指令的情况下，您将有多个嵌套范围，因此您应该进行一些更改(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();                
            } 
        },
    }    
});

或者这个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();                
            } 
        },
    }    
});

但是在普通情况下它们都不起作用。我认为更好的 solution 是改变初始方法。您应该将其标识符传递给每个指令，即 rfocus 和对变量 focus 的引用，它确定当前聚焦的元素，因此您可以在控制器中更改此变量，然后指令将反映它：

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

Angular 使用 ng repeat 时 js 指令控制器函数绑定问题

Angular js directive controller function bind issue when using ng repeat

angularjs

angularjs-directive