Question

我在HTML文件输入周围创建了一个简单的指令包装器，以使角度绑定工作。这是我的指示：

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>

它非常简单且有效 - 如果页面上只有一个。一旦我添加第二个，我注意到只有第一个更新。如果我选择带有第二个文件的文件，则标签会在第一个文件上更新。我的怀疑是，需要[＆＃39; inputFile＆＃39;]将第一个指令实例的控制器拉入链接函数或其他东西（不应该发生）。即便在我打字的时候，这对我来说也没有意义。那么这里发生了什么，我该如何解决？

这是一个让你们玩耍并尝试解决问题的代码：http://codepen.io/astynax777/pen/PzzBRv

Answer 1

你的问题与你的角度没有关系...是你的HTML。您将两次分配相同的ID。将模板更改为：

template: `<label class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}<input class="ng-hide" type="file" /></label>`

为什么我的指令由于同一指令的另一个实例的更改而更新？

1 个答案: