angular.js - The array read by the controller layer method is assigned to the object under $scope. The object is bound to the page. Why can’t the content of the array be seen on the page?

Question

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

})

//Page
<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>
The getPictures method returns a string array. Each element of the string array is a file path, and then displays the picture on the page. But the result is that I can’t see anything. What’s going on?

Answer 1

Please add $scope.$digest();

below $scope.fileList=results;

Normally, after execution, event functions such as ng-click will automatically detect whether the scope has changed and then apply the changes. But you used Promise here to perform asynchronous operations, and the function in then() will be executed after the asynchronous operation is completed. At this time, chooseFile has been executed, and the modification will not be automatically detected unless you call digest.

In short, there will be many exceptions when Angular automatically detects modifications, such as asynchronous operations, third-party events, modifications to other controllers, etc., so be careful to add $scope.$digest();

Answer 2

1. Custom instructions in templates can be used normally.

2. The controller is successfully registered in the template.
   If the above two items are true, then as mentioned above, the callback function does not return successfully before the template rendering is completed, so the returned data cannot be obtained.