jquery - AngularJS如何延迟绑定元素

Question

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

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

我已经尝试了一些东西，但我无法让它工作。

我的问题有意义吗？

Answer 1

你仍然可以在 Angular 中使用 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>

在此处查看更多信息：http: //docs.angularjs.org/guide/directive 或http://www.egghead.io

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

编辑

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

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

Answer 2

这是我的解决方案。要实现，您需要访问 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;
        };
    }]);

我在路由提供程序中链接控制器。还要注意行url: 'server/PhotoUpload.php'。您需要在 Google 上搜索 PHP（或者如果您知道如何使用 node.js，PHP 现在对我来说更容易）脚本来实际接收上传的文件并将它们写入磁盘。

不要忘记将bold, green and red类放在您的 css 文件中。

一个巧妙的技巧是在 $http 承诺成功代码中。它接收每个文件上传的状态，然后在每个编号的选定文件旁边设置一个绿色/红色状态消息。它工作得很好。我可能很快会做两项改进：1) 显示带有状态文本的状态图标和... 2) 我将把文件作为 CouchDB 附件上传，而不是写一个磁盘文件夹。我现在从#2开始！

“是的”我知道从控制器更新 DOM 不是“Angular 方式”，但是没有其他方法可以显示延迟的文件上传状态。不是我想通了。如果我错了，请纠正我;-)如果你能提出任何改进建议，如果你发布它们我会很高兴:-)