更改指令鏈接中的根作用域參數

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

使用具有角需要一些plumbery第三方庫。

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

})();