Question

我正在使用AngularJS自定义指令来实现html文件输入。我在Github上使用了一个开源库。但是当我试图从控制器访问范围值时，它显示为未定义的变量。 / p>

以下是指令代码

 angularApp.directive('file', function() {
return {
    restrict: 'AE',
    scope: {
        file: '@'
    },
    link: function(scope, el, attrs){
        el.bind('change', function(event){
            var files = event.target.files;
            var file = files[0];
            // scope.file = file;
            scope.file = file;
            scope.$parent.file = file;
            scope.$apply();
        });
    }
};
});

以下是html代码

<input type="file" class="form-control" name="file" required>

但是在html代码中，其他html代码片段的ng-models绑定到范围对象。例如，

这使用了ng-submit属性和addNewUser（resources.newUser）

以下是控制器代码的一部分

$scope.addNewUser = function(data) {
        console.log('FILE PATH IS :' + $scope.file);

}

Answer 1

将指令用作元素的属性file="file"。

<input type="file" class="form-control" name="file" required file="file" >

查看演示

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.file ;

$scope.addNewUser = function(data) {
   console.log( $scope.file);

}

}).directive('file', function() {
return {
    restrict: 'AE',
    scope: {
        file: '@'
    },
    link: function(scope, el, attrs){
    debugger
        el.bind('change', function(event){
            var files = event.target.files;
            var file = files[0];
            // scope.file = file;
            scope.file = file;
            scope.$parent.file = file;
            scope.$apply();
        });
    }
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <input type="file" class="form-control" file="file" name="file" required>
 <button ng-click="addNewUser()">aaa</button>
</div>

在Angularjs自定义指令中获取问题的html输入文件值

1 个答案: