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

我在routeprovider中链接控制器。另请注意第url: 'server/PhotoUpload.php'行。你需要谷歌的PHP（或者你可以使用node.js，如果你知道如何，PHP对我来说更容易）脚本实际上接收上传的文件并将它们写入磁盘。

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

这个有点巧妙的技巧是在$ http promise成功代码中。它接收每个文件上载的状态，然后在每个编号的所选文件旁边设置绿色/红色状态消息。它工作得很好。我很快就会做两个改进：1）显示带有状态文本的状态图标和... 2）我要将文件上传为CouchDB附件而不是写入磁盘文件夹。我现在开始＃2了！

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

AngularJS如何延迟绑定一个元素

2 个答案: