dropzone表单动作通过angularjs控制器动态

Question

我需要从控制器提供表单中的动作网址，但由于某种原因，我无法执行此操作，  这是我的表格代码

<form name="myForm" action="{{URL}}" method="post" class="dropzone" id="mydropzone" style="background-color:#ededed; border:1px dashed">
    <div class="fallback">
       <input name="file" type="file" />
    </div>
</form>

我收到此错误

POST http://localhost:62078/%7B%7BURL%7D%7D 404 (Not Found)
c.submitRequest @ dropzone.min.js:1
c.uploadFiles @ dropzone.min.js:1
c.processFiles @ dropzone.min.js:1
c.processFile @ dropzone.min.js:1
c.processQueue @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1

Answer 1

这不是发布HTTP发布请求的Angular方式。 您应该使用$http服务：

$http({
  method: 'POST',
  url: '/someUrl',
  data: {'form': yourForm}
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Answer 2

您可以在表单上使用ngSubmit。

  

ngSubmit可以将AngularJS表达式绑定到onsubmit事件。

     

此外，它会阻止默认操作（表单意味着   将请求发送到服务器并重新加载当前页面），但是   仅当表单不包含action属性时。

<form ng-submit="postData()">
    ...
</form>

在您的控制器中，定义将发布到HTTP帖子的函数：

$scope.postData = function() {
    $http
      .post(url, { email: $scope.email, name: $scope.name })
      .then(function (response) { 
          /* Success */
          $log.debug(response);
      }).then(function(reason) {
          /* Fail */
      });
    }
}

Answer 3

使用带有AngularJS的dropzone

对表单元素ng-attr-属性使用action绑定：

<form name="myForm" ng-attr-action="{{URL}}" method="post" class="dropzone" id="mydropzone" style="background-color:#ededed; border:1px dashed">
    <div class="fallback">
       <input name="file" type="file" />
    </div>
</form>

  

ngAttr用于绑定到任意属性

     

Web浏览器有时会对它们认为对属性有效的值感到挑剔。

     

如果带有绑定的属性以ngAttr前缀为前缀（非规范化为ng-attr-），则在绑定期间，它将应用于相应的未加前缀的属性。这允许您绑定到浏览器急切处理的属性。

     

— AngularJS Developer Guide - Interpolation (ngAttr Binding)