Ionic和Angularjs - 从控制器更新/刷新视图

时间:2016-02-04 22:57:10

标签: javascript angularjs ionic-framework angularjs-scope angular-ui-router

这些通常的开始,我是Ionic和Angularjs的新手。我正在开发一款Ionic应用程序,它的核心非常简单。我们显示一个类(会话)列表,人们点击图标来预订课程,然后图标会更改以允许他们取消课程。我们还会更新卡片,以显示当天每个会话剩余的地点数量。 我有代码工作在类中添加和删除一个人但我不知道如何从控制器内更新模板视图。 控制器代码非常简单

  // Check Person in to session.
  $scope.addCheckIn = function(schedule){
      var promise = sessionDataService.checkinSession(schedule.sessionID);
      promise.then(function(data){
          // Update (refresh) Schedule Details 
          // NOT SURE WHAT TO PUT HERE??
      });
  };

我尝试了很多不同的方法,包括

刷新$ state并调用doRefresh甚至调用原始控制器方法再次填充卡片但视图不会更新,除非我在屏幕上的状态之间进行物理点击

    //$state.go('app.schedules', {}, {reload: true});
    //$scope.doRefresh();
    //getScheduleData(formatDate(selectedDate), formatDate(selectedDate), 'true');

我也看过$ scope.apply和$ scope.timeout,但我不确定这是否会让我从真正的解决方案中走得更远

更新后更新视图的正确方法是什么?应该是在控制器中的promise.then之后,还是应该调用服务并更新所有内容。

任何关于最佳方法的提示和右边的一点都会非常感激。

谢谢大家。

1 个答案:

答案 0 :(得分:1)

在您的承诺中,您应该将数据添加到范围。

$scope.scheduledetails = data;

然后在您的模板中,您将能够使用 AngularJS 括号从控制器访问对象 scheduledetails ,以将数据绑定到HTML。

<h1>{{scheduledetails.title}}</h1>
<p>Details : {{scheduledetails.details}}</p>

AngularJS 应该在不需要调用任何方法或任何东西的情况下处理所需的内容。

完整示例

控制器

$scope.addCheckIn = function(schedule){
      var promise = sessionDataService.checkinSession(schedule.sessionID);
      promise.then(function(data){
          $scope.scheduledetails = data;
      });
  };

模板

<h1>{{scheduledetails.title}}</h1>
<p>Details : {{scheduledetails.details}}</p>