问题描述
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 ui-sref='tab.more-userInfo'><i class='icon ion-ios-arrow-left'></i></a></ion-nav-buttons><ion-nav-buttons side='right'> <a ng-click='uploadFiles()'>发送</a></ion-nav-buttons><ion-content ng-init='initPage()'> <script type='text/ng-template'><p ng-message='ng-maxlength'>请输入最多20个字符</p><p ng-message='ng-minlength'>请输入至少1个字符</p> </script> <p ng-class='{’has-error’:fileForm.folderName.$invalid}'><textarea ng-model='folderName' name='folderName' type='text' placeholder='请输入文档名称' ng-maxlength='20' ng-minlength='1'></textarea> </p> <p ng-show='fileForm.folderName.$invalid' ng-messages='fileForm.folderName.$error' ng-messages-include='templates/form-errors.html'> </p> <p class='item item-icon-left'><i ng-click='chooseFile()' style='width: 30px;height:26px'></i> </p> <p class='row'><p ng-repeat='file in fileList'> <img ng-src='https://www.6hehe.com/wenda/{{file}}'></p> </p></ion-content>
</ion-view></form>getPictures方法返回一个字符串数组,该字符串数组每一个元素都是一个文件路径,然后将图片显示到页面上,可是结果是什么也看不到,这是怎么回事呢
问题解答
回答1:请在$scope.fileList=results;下面加上$scope.$digest();
正常情况下ng-click等事件函数在执行完毕后会自动检测scope是否有更改然后应用更改。但是你这里用了Promise来进行异步操作,其中then()里面的函数会在异步操作完成后执行。而此时chooseFile已经执行完毕,除非你调用digest否则是不会自动检测修改的。
总之,angular自动检测修改会有很多例外,比如异步操作,比如第三方事件,比如对其他控制器做的修改等,所以注意加$scope.$digest();
回答2:模板中的自定义指令可以正常使用。
该controller成功注册到了模板中。如果上两条成立,那么就是楼上说的,回调函数没有在模板渲染完成之前成功返回,所以拿不到返回的数据。