我是离子的新手,我想上传图片,因此我使用“ng-file-upload”上传我的图片.
但是只有当我删除“ion-content”时代码才能工作.我的模板是：
但是只有当我删除“ion-content”时代码才能工作.我的模板是：
<ion-view view-title="IQ Marketplace" ng-controller="SellCtrl">
<ion-content class="padding" >
<div class="list">
<form ng-submit="submitAds()" name="form" novalidate>
<label class="item item-input">
<span class="input-label">Picture</span>
<input type="file" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
accept="image/*" >
</label>
<input type="submit" class="button button-block button-positive" value="Save" ng-disabled="form.$invalid">
</form>
</div><!--list-->
</ion-content>
</ion-view>
我的控制器是：
.controller('SellCtrl',function($scope,Upload) {
$scope.submitAds = function() {
console.log("ayman "+ $scope.file)
$scope.upload($scope.file);
};
$scope.upload = function (file) {
Upload.upload({
url: 'http://localhost/IQM/public/ads',data: {file: file,'username': $scope.test}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
},function (resp) {
console.log('Error status: ' + resp.status);
},function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
});
这段代码给了我这个例外：
TypeError: Cannot read property 'name' of undefined at controllers.js:84 at ionic.bundle.js:23476 at Scope.$eval (ionic.bundle.js:24673) at Scope.$digest (ionic.bundle.js:24484) at ionic.bundle.js:24712 at completeOutstandingRequest (ionic.bundle.js:14221) at ionic.bundle.js:14493
解决方法
我想你已经介绍了
Ionic Framework.
这显然是角度范围问题.
您可以在离子内容中定义ng-model =“file”.虽然ion-content创建了一个新范围,但您无法直接检索变量文件.
请参考doc,它说：
Be aware that this directive gets its own child scope.
您可以使用点符号,例如：
// controller
$scope.data = {}
// html
<ion-content class="padding" >
...
<input ng-model="data.file" />
...
</ion-content>
然后你可以通过$scope.data.file获取值.
根本原因在于AngularJS的范围概念.
> http://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811
> https://github.com/angular/angular.js/wiki/Understanding-Scopes
