Question

我在这里使用ng-flow，名为ng-flow-standalone.js的脚本：https://github.com/flowjs/ng-flow

我的理念是，当用户添加新项目时，仅显示上传字段，并且一旦上传照片，其他表单字段将显示为例如标题，描述。

在代码中，app会创建product_id，image_id，然后保存文件。保存过程完成后，它将以json格式返回product_id，image_id等。一旦定义了product_id，将显示HTML，隐藏的表单字段。

我看到服务器在控制台日志中响应了JSON，但不知道如何在HTML或角度控制器中显示它。我无法在文档和演示中看到这个方法。任何人都可以帮助我吗？

由于

示例代码：

..
<script src="/assets/js/ng-flow-standalone.js"></script>
..
<div class="row">
  <div class="col-md-4" flow-init="{target:'upload_image.json'}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Photos</h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div ng-repeat="file in $flow.files">
            <div class="col-md-3">
              <div class="thumbnail">
                <img flow-img="file" />
              </div>
            </div>
          </div>
        </div>
        <div>
          <span class="btn btn-primary" flow-btn flow-files-submitted="$flow.upload()">Upload</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8" ng-show="{{ xxx.product_id }}">
    <form class="panel panel-default form-horizontal">
      <div class="panel-heading">
        <h3 class="panel-title">Infomation</h3>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label class="col-sm-2 control-label">Title</label>
          <div class="col-sm-6">
            <input name="name" type="text" class="form-control" required>
          </div>
          <div class="col-sm-4"></div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Description</label>
          <div class="col-sm-6">
            <textarea class="form-control" rows="3" required></textarea>
          </div>
          <div class="col-sm-4">Write useful info e.g. appearance, purpose and recommendations</div>
        </div>
      </div>
      <div class="panel-footer">
        <input type="hidden" name="product" value="{{ xxx.product_id }}">
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
    </form>
  </div>
</div>

请注意＆＃34; xxx.product_id＆＃34;，xxx是我不知道的，可能有点像$ flow.fileSuccess.message.product_id。

解：在Aidas推荐的Controller中使用回调方法

$scope.$on('flow::filesSubmitted', function (event, $flow, flowFile)
  products.save($scope.product)
  .$promise.then(function(result) {
    $scope.product = result;
    if ($scope.product.id) {
      $flow.opts.target = apiUrl + '/products/' + $scope.product.id + '/images';
      $flow.upload();
    }
  });
});

Answer 1

您无法直接访问成功消息，但可以通过回调访问它。

flow-file-success=" ... properties '$file', '$message' can be accessed ... "

在HTML中：

<div flow-file-success="success($message)">...

success - 应该是控制器中定义的方法。将此消息分配给作用域，或以任何其他方式使用它。

Answer 2

这在ng-flow文档中的记录很少。我需要在我可以访问$ scope的控制器中访问响应。文档说这是关于在控制器中捕获事件： https://github.com/flowjs/ng-flow#how-can-i-catch-an-event-in-a-controller

“...... [第二个参数始终是一个流实例，然后是特定于事件的参数。”

所以我在角度控制器中使用了这个：

$scope.$on('flow::fileSuccess', function (event, $flow, $file, $message) {  
 // $message is the json response from the post
})

这似乎有效。

ng-flow.js，如何在HTML或控制器中显示响应的JSON数据

2 个答案: