Question

我有一个指令定义了一个输入字段type =“file”，我可以打印并且不是空的，即：

<form class="form-horizontal" role="form">
    <input type="file" file-model="myFile"/>
    {{myFile}} <-- this prints fine
    <button type="submit" class="btn btn-success" ng-click="saveData()">Post</button>
</form>

如果在视图中调用我可以看到

app.js

.directive('fileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
      }
    };
}]);

我现在要做的是访问控制器内的字段：

.controller('Ctrl', function($scope, fileUpload) {
    ...

    $scope.myFile; <-- initialise it 

    $scope.saveData = function() {

        var file = $scope.myFile;
        console.log(file); <-- prints out as undefined
    }



.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){

        })
        .error(function(){

        });
    }
}]);

但文件 未定义。

为什么会发生这种情况以及如何获取该领域的价值？

Answer 1

如果您想将属性值引入指令，我建议您这样做。

.directive('myDirective', ['$parse', function ($parse) {
return {
    restrict: 'A',
    scope: {
    fileModel: '=fileModel'
    }
    link: function(scope, element, attrs) {
        var model = scope.fileModel;
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
      }
    };
}]);

注意我已经更改了您的指令名称，因为您已经拥有了具有该名称的属性。

<input type="file" my-directive file-model="myFile"/>

我不确定在获得属性值后你想要做什么，但是如果你使用console.log（scope.fileModel），你可以看到哪些内置选项可用。这是指令中隔离范围的一个示例。

使用控制器访问权限进行更新

要在控制器中访问，您可以从指令中发出值：

scope.$emit('myFile', scope.fileModel);

然后在你的控制器中监听事件：

$scope.$on('myFile', function (event, myFile) {
    $scope.myFile = myFile;
};

用工作小提琴更新

http://jsfiddle.net/jonesmac82/376SS/26/

Angular.js访问控制器$ scope内的输入字段值

1 个答案: