Question

我有一个跟随控制器：

controllersAdmin.controller( 'productCreate' , [ '$scope' , '$http' , '$timeout', 'checkToken', 'categoriesService', 'FileUploader', function( $scope , $http, $timeout, checkToken, categoriesService, FileUploader ){

$scope.product = {};

// get products
$http.post( 'api/admin/products/get', {

    token: checkToken.raw()

}).then( function( data ){

    $scope.products = data.data;

    if($scope.products.length > 0) {
        $scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
    } else {
        $scope.product['id'] = 1;
    }

}, ( function(){

    console.log( 'Error on communicate with API.' );

}));

// init uploader
var uploader = $scope.uploader = new FileUploader({

    token: checkToken.raw(),
    url: 'api/admin/images/upload/' + $scope.product['id']

});

在由此控制器控制的模板中，我有以下内容：

<h3>Upload product photo</h3>

            <div ng-show="uploader.isHTML5">
                <!-- 3. nv-file-over uploader="link" over-class="className" -->
                <div class="well my-drop-zone" nv-file-over="" uploader="uploader">
                    Drag & drop photo here
                </div>
            </div>

            <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
            <input class="btn btn-default" type="file" nv-file-select="" uploader="uploader" multiple  /><br/>

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th ng-show="uploader.isHTML5">Size</th>
                    <th ng-show="uploader.isHTML5">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in uploader.queue">
                    <td>
                        <strong>{{ item.file.name }}</strong>
                        <!-- Image preview -->
                        <!--auto height-->
                        <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
                        <!--auto width-->
                        <div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
                        <!--fixed width and height -->
                        <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
                    </td>
                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>
                <div>
                    Queue progress:
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                </button>
                <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>

首先，我从我的API获取$http.post的数据。
然后我根据$scope.product['id']初始化文件上传器，但是它显示了我的网址：api/admin/images/upload/undefined因此$scope.product['id']在$http.post之外未定义。

从$http获取数据后如何访问此变量？

Answer 1

$http.post方法返回一个promise，因为它是一个异步操作。

因为你在执行then内的函数之前初始化了上传器，所以$scope.product['id']仍然有一个未定义的值。

尝试在promise的on fulfill函数内初始化上传器（$scope.uploader）。

<强> E.g：

$http.post( 'api/admin/products/get', {

    token: checkToken.raw()

}).then( function( data ){

    $scope.products = data.data;

    if($scope.products.length > 0) {
        $scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
    } else {
        $scope.product['id'] = 1;
    }
    var uploader = $scope.uploader = new FileUploader({
        token: checkToken.raw(),
        url: 'api/admin/images/upload/' + $scope.product['id']

});

}, (function(){

    console.log( 'Error on communicate with API.' );

}));

为避免因为$scope.uploader尚未定义而导致错误（http调用会延迟创建），您可以在使用upload指令之前使用ng-if="uploader !== undefined"。

Angular FileUploader - 具有未定义的URL

1 个答案: