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

Question

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

我的概念是，当用户添加新项目时，只显示上传字段，一旦照片上传，就会显示其他表单字段，例如标题、描述。

在代码中，应用程序将创建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>

请注意，在"xxx.product_id"，xxx是我不知道的，可能是$flow.fileSuccess.message.product_id.之类的东西

解决方案：在控制器中使用Aidas 推荐的回调方法

$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流文档中记录得很差。我需要在控制器中可以访问的响应，在那里我也可以访问$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
})

这似乎奏效了。