搜尋

首頁  >  問答  >  主體

angular.js - controller層的方法讀取到的數組賦值給$scope下的對象,該對象綁定到了頁面上,為什麼頁面上看不到數組中的內容

appCtrls.controller('uploadFileCtrl', function ($scope, $state, $cordovaImagePicker, localStorageService) {

$scope.initPage = function () {
    $scope.folderName=""
    $scope.fileList = [];
}
$scope.chooseFile = function () {
    var options = {
        maximumImagesCount: 9,
        width: 800,
        height: 800,
        quality: 80
    };
    $cordovaImagePicker.getPictures(options).then(function (results) {
        $scope.fileList=results;
        console.log("fileList:"+$scope.fileList);
    }, function (error) {
        // error getting photos
    });
}

})

//頁


<ion-nav-buttons side="left">
    <a class="button button-clear" ui-sref="tab.more-userInfo"><i class="icon ion-ios-arrow-left"></i></a>
</ion-nav-buttons>
<ion-nav-buttons side="right">
    <a class="button button-clear" ng-click="uploadFiles()">发送</a>
</ion-nav-buttons>
<ion-content ng-init="initPage()">
    <script id="templates/form-errors.html" type="text/ng-template">
        <p class="form-error" ng-message="ng-maxlength">请输入最多20个字符</p>
        <p class="form-error" ng-message="ng-minlength">请输入至少1个字符</p>
    </script>

    <p class="item item-input" ng-class="{'has-error':fileForm.folderName.$invalid}">
        <textarea style="height: 100px" ng-model="folderName" name="folderName" type="text" placeholder="请输入文档名称" ng-maxlength="20" ng-minlength="1">
        </textarea>
    </p>
    <p ng-show="fileForm.folderName.$invalid" class="form-errors"
         ng-messages="fileForm.folderName.$error"
         ng-messages-include="templates/form-errors.html">
    </p>
    <p class="item item-icon-left">
        <i ng-click="chooseFile()" class="icon ion-image" style="width: 30px;height:26px"></i>
    </p>
    <p class="row">
        <p class="item-avatar" ng-repeat="file in fileList">
            <img ng-src="{{file}}">
        </p>
    </p>
</ion-content>



getPictures方法傳回一個字串數組,該字串數組每一個元素都是一個檔案路徑,然後將圖片顯示到頁面上,可是結果是什麼也看不到,這是怎麼回事呢

PHP中文网PHP中文网2744 天前642

全部回覆(2)我來回復

  • 大家讲道理

    大家讲道理2017-05-15 16:59:30

    請在$scope.fileList=results;下面加上$scope.$digest();

    正常情況下ng-click等事件函數執行完畢後會自動偵測scope是否有變更然後套用變更。但是你這裡用了Promise來進行非同步操作,其中then()裡面的函數會在非同步操作完成後執行。而此時chooseFile已經執行完畢,除非你呼叫digest否則是不會自動偵測修改的。

    總之,angular自動偵測修改會有很多例外,例如非同步操作,例如第三方事件,例如對其他控制器做的修改等,所以注意加$scope.$digest();

    回覆
    0
  • ringa_lee

    ringa_lee2017-05-15 16:59:30

    1. 範本中的自訂指令可以正常使用。

    2. 該controller成功註冊到了模板中。
      如果上兩條成立,那就是樓上說的,回呼函數沒有在模板渲染完成之前成功返回,所以拿不到返回的資料。

    回覆
    0
  • 取消回覆