Question

我在使用ngRepeat中的指令时遇到问题。我无法获得$ scope.files的价值。在ngrepeat内部使用时未定义但在未使用ngrepeat时正常工作。无法弄清楚。非常感谢。

在ng-repeat中使用时， $ scope.files未定义。如果没有在内部工作完美

<button class="btn btn-success login-button" ng-click="addassignment()">+</button>
<table>
    <tr ng-repeat = "assignment in assignments">
        <td><input class = "filegap" type = "file" file-model="form.cv" ng-model="form.cv" ng-file-select="fileselected(newemp.email)" file-input="files" multiple/></td>
    </tr>
</table>

的javascript：

app.directive('fileInput', ['$parse', function($parse, $compile){
    return {
        restrict:'A',
        link:function(scope,elm,attrs){
            elm.bind('change', function(){
                $parse(attrs.fileInput)
                .assign(scope,elm[0].files)
                scope.$apply()
            })
        }
    }
}]);

控制器：

$scope.addassignment = function(){
    if(typeof $scope.assignments == 'undefined'){
        $scope.assignments = [];
    }
    $scope.assignments.push({});
}
console.log($scope.files);

Answer 1

你没有在主范围上创建一个文件变量，当你使用assign时它将分配给一个新创建的文件（而不是在控制器上），我已经修改了你的代码，

angular.module('myApp',[]).controller('Main', ['$scope', function($scope) {
  $scope.files = [];
  $scope.addAssignment = function(){
    if(typeof $scope.assignments == 'undefined'){
        $scope.assignments = [];
    }
    console.log('add');
    $scope.assignments.push({});
  }
  console.log($scope.files);
  $scope.$watch('files.length', function() {
    console.log($scope.files);
  });
}]).directive('fileInput', [function() {
  return {
        restrict:'A',
        link:function(scope,elm,attrs){
                var files = scope[attrs['fileInput']];
            elm.bind('change', function(){
                files.push(this.files);
                scope.$apply()
            });
        }
    }
}]);

你可以看看这里： http://plnkr.co/edit/mhXKdlDG5lg8Xnw50lua?p=preview

P.S。您还可以在指令中使用范围绑定而不是$ parse。

此外，当您直接分配时，它将始终覆盖文件，因为原型继承在JS中的工作原理，使用对象/数组代替在更深的范围内分配值（如ng-model / ng-repeat等）

ng-repeat内的指令不起作用

1 个答案: