我在 HTML 文件输入周围创建了一个简单的指令包装器，以使 Angular 绑定(bind)起作用。这是我的指令:
angular.module('myApp').directive('inputFile', InputFileDirective);
function InputFileDirective() {
var bindings = {
selectLabel: '@',
};
return {
restrict: 'E',
require: ['inputFile', 'ngModel'],
scope: true,
controllerAs: 'inputFileCtrl',
bindToController: bindings,
controller: function () {
},
template: `<input class="ng-hide" id="input-file-id" type="file" />
<label for="input-file-id" class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}</label>`,
link: link
};
function link(scope, element, attrs, controllers) {
if (angular.isDefined(attrs.multiple)) {
element.find('input').attr('multiple', 'multiple');
}
var inputFileCtrl = controllers[0];
var ngModelCtrl = controllers[1];
inputFileCtrl.getButtonLabel = function () {
if (ngModelCtrl.$viewValue == undefined || ngModelCtrl.$viewValue.length == 0) {
return inputFileCtrl.selectLabel;
}
else {
return ngModelCtrl.$viewValue.length + (ngModelCtrl.$viewValue.length == 1 ? " file" : " files") + " selected";
}
};
element.on('change', function (evt) {
ngModelCtrl.$setViewValue(element.find('input')[0].files);
ngModelCtrl.$render();
});
}
};
这是 HTML
<body ng-app="myApp" ng-controller="MyController as ctrl">
<form name="ctrl.myForm">
<input-file select-label="Select Attachment" ng-model="ctrl.attachment1"></input-file>
<input-file select-label="Select Attachment" ng-model="ctrl.attachment2"></input-file>
</form>
</body>
这非常简单并且有效 - 只要页面上只有一个。当我添加第二个时，我注意到只有第一个会更新。如果我选择带有第二个文件的文件，则标签会更新第一个文件。我怀疑 require ['inputFile'] 正在将第一个指令实例的 Controller 拉入链接函数或其他东西(这不应该发生)。即使现在当我打字时，这对我来说也没有什么意义。那么这是怎么回事以及如何解决它？
这里有一个代码笔供你们玩并尝试弄清楚:http://codepen.io/astynax777/pen/PzzBRv
最佳答案
你的问题不在于你的 Angular ...在于你的html。 您分配了相同的 id 两次。 将您的模板更改为:
template: `<label class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}<input class="ng-hide" type="file" /></label>`
关于javascript - 为什么我的指令会因同一指令的另一个实例的更改而更新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37866105/