Angular，在将文件上传到服务器并处理之前尝试读取文件

Question

我有一个 ng-drop 区域，允许用户将 STL 格式的文件上传到服务器。在将这些文件发送到服务器之前，我正在尝试使用 three.js 库打开并生成缩略图。

首先我创建一个“本地”副本，即。让 FileReader 在浏览器中读取上传的文件：

    //File-upload related
    $scope.$watch('download.files', function () {
        if ($scope.download.files != null) {
            for(var i=0;i<$scope.download.files.length;i++) {
                var reader = new FileReader();
                //var objData;
                var file = $scope.download.files[i];

                reader.onload = (function(theFile) {
                    return function(e) {
                        for (var x=0;x<$scope.filesInUploadList.length;x++){
                            if (file.name == $scope.filesInUploadList[x].file.name) {
                                $scope.$apply(function() {
                                    $scope.filesInUploadList[x].data = e.target.result;                             
                                });
                            }
                        }
                    };
                })($scope.download.files[i]);

                reader.readAsText($scope.download.files[i]);

                $scope.filesInUploadList.push( {
                    modelId: '',
                    file: $scope.download.files[i],
                    volume: 0,
                    boundingBox: [0,0,0,0],
                    data: 99,
                });
            }

/*TODO: Continue to upload when thumbnail is done
            if ($scope.download.files != null) {
                $scope.upload($scope.download.files);
            }
*/
        }
    });

在 html 中我有以下 angular 指令：

display data for debug: {{f.data}}
<div id="webglContainer" ng-webgl width="100" height="100"ng-attr-stlFile="{{f.data}}"></div>   

和 ng-webgl 指令： '使用严格';

angular.module('myApp')
  .directive('ngWebgl', function () {
    return {
      restrict: 'A',
      scope: {
        'width': '=',
        'height': '=',
        'stlData': '=stlFile',
      },
      link: function postLink(scope, element, attrs) {

    var camera, scene, renderer, light,
      data = scope.stlData,
      contW = element[0].clientWidth,
      contH = scope.height;

    scope.$watch('scope.stlData', function (value){
            console.log("scope.stlData, after:"+value);
        });

    scope.init = function () {

      // Camera
      camera = new THREE.PerspectiveCamera( 20, contW / contH, 1, 10000 );
      camera.position.z = 100;

      // Scene
      scene = new THREE.Scene();

      // Ligthing
      light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 0, 0, 1 );
      scene.add( light );

      // ASCII file
      var material = new THREE.MeshPhongMaterial( { color: 0xff5533, 
          specular: 0x111111, shininess: 200 } );
      var mesh = new THREE.Mesh( data, material );

      mesh.position.set( 0, - 0.25, 0.6 );
      mesh.rotation.set( 0, - Math.PI / 2, 0 );
      mesh.scale.set( 0.5, 0.5, 0.5 );

      mesh.castShadow = true;
      mesh.receiveShadow = true;

      scene.add( mesh );

      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setClearColor( 0xffffff );
      renderer.setSize( contW, contH );

      // element is provided by the angular directive
      element[0].appendChild( renderer.domElement );
    };

    // -----------------------------------
    // Draw and Animate
    // -----------------------------------
    scope.animate = function () {
      requestAnimationFrame( scope.animate );
      scope.render();
    };

    scope.render = function () {
      camera.lookAt( scene.position );
      renderer.render( scene, camera );
    };

    // Begin
    scope.init();
    scope.animate();
  }
};

});

我的问题是作用域和文件读取器完成后将数据发送到指令。我未能在指令属性中设置与该 {{f.data}} 的绑定（在上面的行中显示“显示数据以进行调试”的数据，因此当文件读取器结果可用时，我的指令应该获取数据并在查看器中显示 3d 模型。

我试图了解指令范围和指令的创建方式以及绑定到它们的属性，但似乎我缺少一些真正的 Angular 大师所拥有的知识。

Answer 1

我在我的代码中发现了几个缺陷，现在系统似乎可以工作了。首先，我在 html 中有错误的标记，我在宽度和高度中使用范围参数（在那些是字符串之前，它们被定义为 int）并且作为 stl 文件标记是 stl-file="f.data"。

我正在成为一名 Angular 绝地大师！