Javascript 为什么我的指令会因为同一指令的另一个实例中的更改而更新？
我围绕HTML文件输入创建了一个简单的指令包装器，以使角度绑定工作。这是我的指示：Javascript 为什么我的指令会因为同一指令的另一个实例中的更改而更新？,javascript,html,angularjs,Javascript,Html,Angularjs,我围绕HTML文件输入创建了一个简单的指令包装器，以使角度绑定工作。这是我的指示： angular.module('myApp').directive('inputFile', InputFileDirective); function InputFileDirective() { var bindings = { selectLabel: '@', }; return { restrict: 'E', require: ['inputFile', 'ngM
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();
});
}
};
angular.module（'myApp'）.directive（'inputFile'，InputFileDirective）；
函数InputFileDirective（）{
变量绑定={
选择标签：'@'，
};
返回{
限制：'E'，
要求：['inputFile'，'ngModel']，
范围：正确，
controllerAs:'inputFileCtrl'，
bindToController:绑定，
控制器：函数（）{
},
模板：`
{{inputFileCtrl.getButtonLabel（）}}`，
链接：链接
};
功能链接（范围、元素、属性、控制器）{
if（角度定义（属性倍数））{
元素find（'input'）.attr（'multiple'，'multiple'）；
}
var inputFileCtrl=控制器[0]；
var ngModelCtrl=控制器[1]；
inputFileCtrl.getButtonLabel=函数（）{
如果（ngModelCtrl.$viewValue==undefined | | ngModelCtrl.$viewValue.length==0）{
返回inputFileCtrl.selectLabel；
}
否则{
返回ngModelCtrl.$viewValue.length+（ngModelCtrl.$viewValue.length==1？“文件”：“文件”）+“选定”；
}
};
元素。on（'change'，function（evt）{
ngModelCtrl.$setViewValue（element.find（'input'）[0]。文件）；
ngModelCtrl.$render（）；
});
}
};
<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>
这里有一个代码笔供你们玩，并试着找出答案：你们的问题不在于你们的角度。。。是与你的html。 您正在为同一id分配两次。 将模板更改为：
template: `<label class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}<input class="ng-hide" type="file" /></label>`
模板：`{{inputFileCtrl.getButtonLabel（）}`
controllerAsscope:truebindToControllerangular.elementlinkelementscope:true