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/