Jquery AngularJS如何延迟绑定元素

在页面上有一些我想设置为延迟的“状态”元素，这意味着在多次文件上传完成之后。当然，使用jQuery选择器很容易做到这一点，但是如何以“角度”的方式做到这一点呢

诀窍在于：上传文件的数量可以是1到X，因此这些“状态”跨度（上传完成后用文本填充）将需要引用数组中的一个项

我试过几次，但都没法成功

---

我的问题有意义吗？

您仍然可以使用jQuery选择器，唯一真正的规则是除了自定义指令之外，您不在任何地方进行DOM操作。现在还不完全清楚您想要做什么，但是如果您需要直接操作DOM，并且无法使用ng class、ng show/hide或其他内置指令来实现，那么您可能需要一个自定义指令

写得像

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>

随机添加
测试
{{someArray}}

请参阅此处的更多信息： 或

如果这无助于显示一些代码，或者只是解释更多关于您尝试过的内容以及哪些内容没有按预期工作的内容

编辑

更新为包含一些绑定到传入参数的内容，将尝试为其设置一个提琴

---

这是我的解决方案。要实现此功能，您需要访问Github并下载和安装感谢Danielfarid提供这个很棒的角度文件上传工具

这是我的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>

单击名称时按住[Ctrl]选择一个或多个文件：





所选文件：

这是我的（相关部分）控制器……

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;
        };
    }]);

angular.module（'myApp.controllers'，[]）
.controller（'phototrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.selectedFiles=[]；
$scope.onFileSelect=函数（$files）{
$scope.selectedFiles=$files；
对于（变量i=0；i<$files.length；i++）{
var$file=$files[i]；
$http.uploadFile({
url:'server/PhotoUpload.php'，
数据：{“fileIdx”：i}，
文件：$file
}).success（函数（数据、状态、标题、配置）{
var选择器=“.status-”+config.data.fileIdx；
var elem=angular.element（document.querySelector（选择器））；
var status=“”；
如果（data.ok==“true”）{
元素addClass（“粗体绿色”）；
状态=“[OK]”；
}否则{
元素addClass（“粗体红色”）；
status=“[”+data.error+“]”；
}
elem.html（“+”状态）；
//修复IE不刷新模型的问题
如果（！$scope.$$phase）$scope.$apply（）；
});
}
};
$scope.fileselected=函数（）{
var html=“”；
对于（变量x=0；x<$scope.selectedFiles.length；x++）{
var file=$scope.selectedFiles[x]；
状态=''；
html+=“
”+file.name+”/size:“+file.size+”B/type:“+file.type+”+status+”
”；
}
返回html；
};
}]);

我正在连接routeprovider中的控制器。还要注意一行

url:'server/PhotoUpload.php'

。你需要在谷歌上搜索一个PHP脚本（或者你可以使用node.js，如果你知道怎么做的话，PHP现在对我来说更容易）来实际接收上传的文件并将它们写入磁盘

别忘了将

粗体、绿色和红色

类放在css文件中

这其中的一个巧妙技巧是$http promise成功代码。它接收每个文件上载的状态，然后在每个编号的选定文件旁边设置一条绿色/红色状态消息。它工作得很好。我可能很快会做两个增强：1）用状态文本显示状态图标和。。。2） 我将将文件作为CouchDB附件上传，而不是写入磁盘文件夹。我现在就从2开始

---

“是的”，我知道从控制器更新DOM不是“角度方式”，但是没有其他方式来显示延迟的文件上传状态。不是我想出来的。如果我错了，请纠正我；-）如果您能提出任何改进建议，我将非常高兴您发布它们：-）

shaunhusain:谢谢您的回复！我真的很感激。我当然理解自定义指令，但它们只在视图加载时被调用并更新dom一次。我需要在文件上传完成后延迟更新dom。是否有某种方法导致元素被重新绑定？是否遵循？如果您正打算这样做，您可以使用$timeout在某个时间间隔内执行某些操作。我认为一般情况下，您创建一个指令，并使用“隔离范围”将该指令绑定到一些数据上。请查看egghead.io视频，它们非常好。基本上，你可以传入数组并在link函数中设置一个watch，这样当数组发生变化时，它就会触发函数调用。也没问题，我最近会忘记感谢，但这并不意味着粗鲁，我也在学习，教学往往是我最好的学习方式之一，所以希望我能在这里帮助你。我要感谢任何提供帮助和建议的人，因为我真的很感激。真是太好了，有人停止了他们帮助我的行为。我听到你在说什么教而学。我完全同意。教学迫使你非常仔细地思考问题。在$http.fileUpload promise success…var selector=“.status-”+config.data.fileIdx中，我可以使用它来实现这一点；var elem=angular.element（document.querySelector（选择器））；当然，这不是“角度”