angular.js - controller层的方法读取到的数组赋值给$scope下的对象,该对象绑定到了页面上,为什么页面上看不到数组中的内容
PHP中文网
PHP中文网 2017-05-15 16:57:30
0
2
635

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

})

//页面
<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>
getPictures方法返回一个字符串数组,该字符串数组每一个元素都是一个文件路径,然后将图片显示到页面上,可是结果是什么也看不到,这是怎么回事呢

PHP中文网
PHP中文网

认证0级讲师

répondre à tous(2)
大家讲道理

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

左手右手慢动作
  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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal