AngularJS如何延遲綁定元素

Question

有一些「狀態」頁面上，我要設置延遲，一些文件上傳完成後，意味着元素。當然，這對於jQuery選擇器來說非常簡單，但我如何以「Angular方式」來做到這一點？

這裏有個技巧：上傳文件的數量可以是1到X，所以這些'狀態'跨越（上傳完成後要填充文本）每個都需要引用數組中的項目。

我已經嘗試了一些東西，我不能使它發揮作用。

難道我的問題有意義嗎？

Answer 1

這裏是我的解決方案。要實施您需要訪問Github並下載並安裝angular-file-upload.js。 謝謝danialfarid這個偉大的Angular文件上傳工具！

這裏是我查看HTML ...

<div> 
    <b>Select one or many files by holding [Ctrl] when clicking name:</b> 
    <br/> 

    <input type="file" ng-file-select="onFileSelect($files)" multiple> 
    <br/><br/> 

    <b>Selected File(s):</b> 
    <ol ng-bind-html-unsafe="filesSelected()"></ol> 
    <br/> 

</div> 

這裏是我的（相關部分）控制器....

angular.module('myApp.controllers', []) 
    .controller('PhotoCtrl', ['$scope','$http', function($scope,$http) { 

     $scope.selectedFiles = []; 

     $scope.onFileSelect = function ($files) { 
      $scope.selectedFiles = $files; 
      for (var i = 0; i < $files.length; i++) { 
       var $file = $files[i]; 
       $http.uploadFile({ 
        url: 'server/PhotoUpload.php', 
        data: {"fileIdx": i}, 
        file: $file 
       }).success(function (data, status, headers, config) { 
        var selector = ".status-" + config.data.fileIdx; 
        var elem = angular.element(document.querySelector(selector)); 
        var status = ""; 
        if (data.ok == "true") { 
         elem.addClass('bold green'); 
         status = "[ OK ]"; 
        } else { 
         elem.addClass('bold red'); 
         status = "[ " + data.error + " ]"; 
        } 
        elem.html("&nbsp;" + status); 
        // to fix IE not refreshing the model 
        if (!$scope.$$phase) $scope.$apply(); 
       }); 
      } 
     }; 

     $scope.filesSelected = function() { 
      var html = ""; 
      for (var x = 0; x < $scope.selectedFiles.length; x++) { 
       var file = $scope.selectedFiles[x]; 
       status = '<span class="status-' + x + '"></span>'; 
       html += "<li><span>" + file.name + "/size: " + file.size + "B/type: " + file.type + "</span>" + status + "</li>"; 
      } 
      return html; 
     }; 
    }]); 

我連接控制器在routeprovider中。還請注意行url: 'server/PhotoUpload.php'。您需要Google獲取PHP（或者，如果您知道如何使用node.js，現在PHP對我來說更容易），以實際接收上傳的文件並將其寫入磁盤。

不要忘了把bold, green and red類在你的CSS文件。

這裏的有點詭計是在$ http promise成功代碼中。它接收每個文件上傳的狀態，然後在每個編號的選定文件旁邊設置綠色/紅色狀態消息。它工作得很好。我可能很快會做兩個增強：1）顯示狀態圖標與狀態文本和...2）我要將文件上傳爲CouchDB附件，而不是寫入磁盤文件夾。我現在開始＃2！

而且「是」我確實知道從控制器更新DOM不是「角度方式」，但是沒有其他方式來執行此延遲文件上傳狀態顯示。不是我已經知道了。 請糾正我，如果我錯了;-)如果你能提出任何改進，我會非常高興，如果你發佈他們:-)

Answer 2

您仍然可以使用jQuery選擇在角唯一的真正的規則是你不這樣做DOM操作地方，但自定義指令。這不是完全清楚你想要做什麼，但如果你需要直接操作DOM，不能與納克級或NG-顯示/隱藏或其他一些內置的指令實現它，那麼你可能需要一個定製指令。

寫他們喜歡

angular.module("myModule", []).directive("myAwesomeDirective", [function(){ 
    return { 
     restrict:'E', //could be E = element, C = class, A = attribute 
     scope: {incomingData:"="}, 
     link:function(scope,iElem,iAttrs) { 
      //this function called for each instance of the directive 
      //do your DOM manipulation here 
      scope.$watch(function() {return scope.incomingData}, function(newVal,oldVal) { 
       console.log(newVal); 
      }, true) 
     } 
    } 
}]).controller("MyCtrl", ["$scope", function($scope) { 
    $scope.someArray = [1,2,3,4]; 
    $scope.addElement = function() { 
     $scope.someArray.push(Math.floor(10*Math.random())); 
    } 
}]); 

使用像

<div ng-app="myModule" ng-controller="MyCtrl"> 
    <button ng-click="addElement()">Add random</button> 
    test 
    {{someArray}} 
    <my-awesome-directive incoming-data="someArray"></my-awesome-directive> 
</div> 

查看更多在這裏：http://docs.angularjs.org/guide/directive 或http://www.egghead.io

如果這沒有幫助試圖表現出一些代碼，或只是更多地解釋你曾經嘗試過什麼，以及什麼不按預期工作。

編輯

更新，包括一些東西結合傳入的參數，將嘗試建立它小提琴。

http://jsfiddle.net/uBaSa/1/