Question

我想在指令控制器内的数组上使用验证消息编写过滤器。我正在进行文件上传控制，用户可以选择多个文件，一旦用户选择文件，我需要在删除选项的表格中显示所有文件。

如果用户选择已经选择的附件和文件大小验证，我需要很少的验证，例如我需要向用户显示消息。

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <input type="file" ng-file-model="files" multiple />
    <button type="button" ng-click="upload()">Upload</button>

    <p ng-repeat="file in files">
      {{file.name}}
      <button type="button" class="btn btn-danger btn-xs" data="{{file.name}}" ng-click="remove(file.name)">
         <span class="glyphicon glyphicon-trash">Remove</span> 
      </button>
    </p>
  </body>

</html>

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

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.files = []; 
      $scope.upload=function(){
        alert($scope.files.length+" files selected ... Write your Upload Code"); 

      };
      $scope.remove=function(fileName){
        alert(fileName);
        for(var i=0;i<$scope.files.length;i++) {
                if($scope.files[i].name === fileName) {
                    $scope.files.splice(i,1);
                    break;
                }
            }
       // $scope.files.splice(0,1);
        console.log($scope.files[0]._file);
        console.log($scope.files.length);
      };
    });


   app.directive('ngFileModel', ['$parse', function ($parse) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var model = $parse(attrs.ngFileModel);
                    var isMultiple = attrs.multiple;
                    var modelSetter = model.assign;
                    var values = [];
                    element.bind('change', function () {
                        angular.forEach(element[0].files, function (item) {
                            var value = {
                               // File Name 
                                name: item.name,
                                //File Size 
                                size: item.size,
                                //File URL to view 
                                url: URL.createObjectURL(item),
                                // File Input Value 
                                _file: item
                            };
                            values.push(value);
                        });
                        scope.$apply(function () {
                            if (isMultiple) {
                                modelSetter(scope, values);
                            } else {
                                modelSetter(scope, values[0]);
                            }
                        });
                    });
                }
            };
        }]);

在上面的代码中，我想在将文件数据推送到文件对象时为重复检查注入过滤器。

请指导我实现这一目标的最佳方式。

提前致谢

Answer 1

我将回答您的标题问题，而不是您的最终目标，因为您似乎只是想在您的指令中获取$filter对象。你可以像这样注入它：

app.directive('someDirectiveName',['$parse','$filter',function($parse,$filter) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $filter(filter)('yada','yada');
    }
  }
}]);

AngularJs - 如何在指令控制器内编写自定义过滤器

1 个答案: