angular.js - Tatasusunan yang dibaca oleh kaedah lapisan pengawal ditetapkan kepada objek di bawah $skop Objek terikat pada halaman Mengapa kandungan tatasusunan tidak dapat dilihat pada halaman?

Question

appCtrls.controller('uploadFileCtrl', fungsi ($skop, $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
    });
}

})

//Halaman
<form name="fileForm" novalidate>
<ion-view>

<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>

</ion-view>
</form>
Kaedah getPictures mengembalikan tatasusunan rentetan ialah laluan fail, dan kemudian memaparkan gambar pada halaman Tetapi hasilnya saya tidak nampak apa-apa?

Answer 1

Sila tambah $scope.$digest();

di bawah $scope.fileList=results;

Dalam keadaan biasa, fungsi acara seperti ng-click akan secara automatik mengesan sama ada skop telah berubah selepas pelaksanaan dan kemudian menggunakan perubahan tersebut. Tetapi anda menggunakan Janji di sini untuk melaksanakan operasi tak segerak, dan fungsi dalam then() akan dilaksanakan selepas operasi tak segerak selesai. Pada masa ini, chooseFile telah dilaksanakan dan pengubahsuaian tidak akan dikesan secara automatik melainkan anda memanggil digest.

Ringkasnya, terdapat banyak pengecualian untuk pengesanan automatik Angular terhadap pengubahsuaian, seperti operasi tak segerak, acara pihak ketiga, pengubahsuaian pada pengawal lain, dll., jadi berhati-hati untuk menambah $scope.$digest();

Answer 2

1. Arahan tersuai dalam templat boleh digunakan seperti biasa.

2. Pengawal berjaya didaftarkan dalam templat.
   Jika dua item di atas adalah benar, maka seperti yang dinyatakan di atas, fungsi panggil balik tidak berjaya dikembalikan sebelum pemaparan templat selesai, jadi data yang dikembalikan tidak boleh diperolehi.