Question

我编写了第一个自定义指令ng-file-chosen，它应该将<input>元素中选择的文件名分配给通过ng-model传递的绑定。

在下面的代码段中，ng-file选择的结果绑定到model.file，并且下面有一个绑定来显示所选的值。

var app = angular.module('app', []);
app.controller('controller', function ($scope) {
    $scope.model = {
        file: "No file selected"
    };
});

var directive = function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attributes) {
            element.change(function (e) {
                var files = (e.srcElement || e.target).files;
                scope.ngModel = files[0];
            });
        }
    };
};

app.directive('ngFileChosen', directive);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="controller">
    <input type="file" ng-file-chosen="" ng-model="model.file"/>
    <p>{{model.file}}</p>
</div>

不幸的是，在选择文件时没有任何反应，绑定也不会更新。我已经尝试检查生成的HTML，看起来好像链接函数根本没有运行，因为输入元素在运行时的完整HTML是：

<input type="file" ng-file-chosen="" ng-model="model.file" class="ng-pristine ng-valid ng-isolate-scope ng-touched">

什么可能导致指令无法成功运行？

Answer 1

您的代码存在一些问题。

您不需要为ngModel执行隔离绑定，因为您在指令中已经需要ngModel。你根本不需要使用孤立的范围。通常，在创建属性指令时，不应使用隔离范围。

您需要范围。$ apply以宣传您对范围的更改。

scope.$apply(function() {
    scope.model.file = files[0].name;  
});

我还有其他一些小修正。 Here是您的代码的更新工作插件。

AngularJS自定义指令不使用所选文件更新模型

1 个答案: