Question

尝试将新对象推入attachments参数时出现问题。它没有在template.html

中的ng-repeat中更新

如你所见，我在dropzone的success-function中执行了一个array.push，它被推入数组但是列表没有更新。

提前感谢您的帮助。

directive.js

(function() {
  "use strict";
  module.exports = attachments;

  function attachments($auth) {

    var _token = "Bearer" + " " + $auth.getToken();

    return {
      restrict: 'EA',
      scope: {
          objectType: '@',
          objectId: '=',
          attachments: '='
      },
      transclude: true,
      templateUrl: 'template.html',
      replace: true,
      link: function(scope, element, attrs) {

          element.find(".drop").first().dropzone({
              url: '<url>',
              multiple: true,
              uploadMultiple: false,
              headers: {
                  "Authorization": _token
              },
              init: function(){
                  this.on("success", function (file) {
                      this.removeAllFiles();
                  });
              },
              success: function(file, response){
                  scope.attachments.push(response);
              },
              sending: function(file, xhr, data){
                  data.append("object_id", scope.objectId);
                  data.append("object_type", attrs.objectType);
              }
          });
      }
    }

  }

  attachments.$inject = ['$auth'];

})();

template.html

<div class="cirons-upload">
    <div class="drop"></div>
    <ul class="list" id="preview_list">

    </ul>
    <ul class="list">
        <li ng-repeat="file in attachments">
            <a href="#">{{file.file_name}}</a>
        </li>
    </ul>
</div>

page.html中 对象发票的id为整数，附件为数组。

<cirons-attachments
    object-id="invoice.id"
    object-type="Invoice"
    attachments="invoice.attachments"
></cirons-attachments>

Answer 1

使用带角度的第三方库需要一些管道。

Angular不检测附件的更改，因为更改检测算法是在鼠标事件，ajax回调等上启动的......所以你需要手动启动摘要周期。

一种常用的方法是将修改代码包装成$ timeout。

试试：

(function() {
  "use strict";
  module.exports = attachments;

  function attachments($auth, $timeout) {

    var _token = "Bearer" + " " + $auth.getToken();

    return {
      restrict: 'EA',
      scope: {
          objectType: '@',
          objectId: '=',
          attachments: '='
      },
      transclude: true,
      templateUrl: 'template.html',
      replace: true,
      link: function(scope, element, attrs) {

          element.find(".drop").first().dropzone({
              url: '<url>',
              multiple: true,
              uploadMultiple: false,
              headers: {
                  "Authorization": _token
              },
              init: function(){
                  this.on("success", function (file) {
                      this.removeAllFiles();
                  });
              },
              success: function(file, response){
                  $timeout(function () { 
                      scope.attachments.push(response);
                  }, 0)
              },
              sending: function(file, xhr, data){
                  data.append("object_id", scope.objectId);
                  data.append("object_type", attrs.objectType);
              }
          });
      }
    }

  }

  attachments.$inject = ['$auth', $timeout'];

})();

更改指令链接内的根范围参数

1 个答案: