Angularjs查看刷新

时间:2016-03-27 15:32:59

标签: angularjs angularjs-controller angularjs-templates

我有一个模板,显示与运动相关的数据,即运动名称,强度等级,描述等,以及一个按钮,用于向该特定运动提交评级。

所有这些数据都是从后端获取的,从我的' 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>

0 个答案:

没有答案