我有一个模板,显示与运动相关的数据,即运动名称,强度等级,描述等,以及一个按钮,用于向该特定运动提交评级。
所有这些数据都是从后端获取的,从我的' videoCtrl'中调用API端点。如下:
.controller('videoCtrl', function($scope,$stateParams, $http, $ionicPopup, djangoAuth) {
$scope.exercise_type='';
$scope.exercise_description='';
$scope.exercise_video_url='';
/** To fetch the initial set of exercises **/
$http.get("/api/exercises/get_exercise/").then(function(response){
$scope.initial_data=response.data;
angular.forEach($scope.initial_data, function(item){
$scope.exercise_type=item.exercise_type;
$scope.intensity_level=item.intensity_level;
$scope.exercise_description=item.description;
$scope.exercise_video_url=$sce.trustAsResourceUrl(item.video_url);
})
});
//Function to play next video
$scope.playNextTest = function(){
var confirmPopup = $ionicPopup.confirm({
title: 'Confirm!',
template: 'Are you sure about your rating?'
});
confirmPopup.then(function(res) {
if(res) {
$scope.isDisabled = true;
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};
在按钮上单击我要求确认,如果用户说是,则向另一个API端点发送另一个请求以执行某些操作。
我希望以某种方式在按钮点击后刷新页面,以便再次加载控制器,然后我在列表中进行下一个练习。
如何做到这一点?
我的模板看起来像这样:
<div align="center">
<h4>Intensity level is {{intensity_level}}</h4>
</div>
<div align="center" class="card" >
<span class="info"><button class="button button-clear ion-information" ng-click="showBestStretchAlert()"></button></span>
<p>
{{exercise_description}}
</p>
</div>
<!-- Div that shows the video -->
<div>{{exercise_video_url}}
<iframe margin="0" padding="0" border="none" width="420" height="345" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
<div >
<div class="row">
<div class="col-33">
<!--First happy smiley-->
<ion-radio ng-model="emotion" ng-value='H' ng-disabled="isDisabled" ng-click="playNextTest()">
<div class='smiley-green floatleft'>
<div class='left-eye'></div>
<div class='right-eye'></div>
<div class='smile'></div>
</div>
</ion-radio>
</div>