更改指令内的根范围参数 link

Question

我在尝试将新对象推入 attachments 参数时遇到问题，并且。在template.html

里面的ng-repeat里面没有更新

如你所见，我在 dropzone 的成功函数中做了一个 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 一起使用需要一些管道工程。

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'];

})();

更改指令内的根范围参数 link

Change root scopes parameter inside directive link

javascript

angularjs

dropzone.js