多个文件上传指令和一个提交按钮答案

【问题标题】：Multiple file upload directives and one submit button多个文件上传指令和一个提交按钮
【发布时间】：2014-09-14 20:16:39
【问题描述】：

我有多个文件上传类别，给我的 HTML 有这些不同的类别，每个类别都有一个用于多个文件的文件上传控件。所有这些部分（以及每个部分的文件上传）都显示在一个 HTML 中。我创建了一个文件上传指令，并将它用于每个上传部分。这可以工作并且可以处理一个名为“上传”的按钮点击事件，这个按钮是指令的一部分。

现在，只需单击一个名为“全部上传”的按钮，我必须一次更新属于不同部分的所有文件。因此，我必须在单击此按钮时从所有指令中上传文件。我怎样才能拥有这个功能。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

我不确定是否有更好的方法，但您可以尝试：

将一个值从控制器传递给所有指令，然后在每个指令上附加一个$watch 在该值上。然后单击 Upload All 按钮将更改值，触发所有指令运行。

控制器：

app.controller = function('Ctrl', function($scope) {
  $scope.uploadAllFlag = false;

  $scope.uploadAll = function() {
    $scope.uploadAllFlag = !$scope.uploadAllFlag;
  }
});

指令：

app.directive = function('directive', function() {
 return {
   scope: { flag: '=' }
   link: function(scope) {
      scope.$watch('flag', function(){
         //do your upload stuff
      }
   }
});

或者，在您的控制器上注入 $rootScope 并广播您可以在指令中捕获的事件：

app.controller = function('Ctrl', function($rootScope, $scope) {
  $scope.uploadAll = function(){
    $rootScope.$broadcast('uploadAll');
  };
});

app.directive = function('directive', function(){
 link: function(scope) {
   scope.$on('uploadAll', function(){
     //do something
   }
 }
});

【讨论】：

【解决方案2】：

我创建了一个简单的 jsfiddle。主要思想包括在那里：http://jsfiddle.net/VpmV2/45/

[1]http://jsfiddle.net/VpmV2/45/

【讨论】：