angulaire.js - Le tableau lu par la méthode de couche de contrôleur est attribué à l'objet sous $scope L'objet est lié à la page. Pourquoi le contenu du tableau n'est-il pas visible sur la page ?

Question

appCtrls.controller('uploadFileCtrl', fonction ($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>
La méthode getPictures renvoie un tableau de chaînes. Chaque élément du tableau de chaînes est un chemin de fichier, puis affiche l'image sur la page. le résultat est que je ne vois rien. Que se passe-t-il ?

Answer 1

Veuillez ajouter $scope.$digest();

ci-dessous $scope.fileList=results;

Dans des circonstances normales, les fonctions d'événement telles que ng-click détecteront automatiquement si la portée a changé après l'exécution, puis appliqueront les modifications. Mais vous avez utilisé Promise ici pour effectuer des opérations asynchrones, et la fonction dans then() sera exécutée une fois l'opération asynchrone terminée. À ce stade, ChooseFile a été exécuté et la modification ne sera pas automatiquement détectée à moins que vous n'appeliez digest.

En bref, il y aura de nombreuses exceptions à la détection automatique des modifications par Angular, comme les opérations asynchrones, les événements tiers, les modifications sur d'autres contrôleurs, etc., alors faites attention à ajouter $scope.$digest();

Answer 2

1. Les instructions personnalisées dans le modèle peuvent être utilisées normalement.

2. Le contrôleur est enregistré avec succès dans le modèle.
   Si les deux éléments ci-dessus sont vrais, alors comme mentionné ci-dessus, la fonction de rappel ne revient pas correctement avant la fin du rendu du modèle, de sorte que les données renvoyées ne peuvent pas être obtenues.