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

Question

我需要从控制器的表单中提供操作的 url，但由于某种原因我无法做到这一点， 这是我的表单代码

<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

在 AngularJS 中使用 dropzone

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

<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)

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

这不是 Angular 发出 HTTP 发布请求的方式。 您应该使用$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.
  });