从工厂成功获取http.get后查看未刷新(使用链式承诺)

时间:2016-08-14 22:52:18

标签: angularjs ionic-framework

我已经阅读了关于这个特定主题的更多教程和帖子,而不是我承认但我仍然无法找到解决方案。我需要在链接的promise返回后刷新视图,该命令返回绑定到$ scope.p.devices。我已经尝试禁用缓存视图(仍然禁用)和许多其他解决方案。希望有人在这里指出我正确的方向。

HTML:                      设备清单

  <md-card>
    <ion-content>
      <div class="card-content">
        <div class="device-content-detail"
          collection-repeat="device in p.devices"
          collection-item-height="136px"
          collection-item-width="100%">
          <div class="card-content">
              <h1 class="md-title">
                      <span>
                          <i class="fa fa-crosshairs" aria-hidden="true"></i>
                        Device List
                      </span>
              </h1>
          {{device.name}}
        </div>
      </div>
    </ion-content>
  </md-card>

    <md-list>
        <md-card ng-if="!isAnimated" class="card-item" ng-repeat="device in p.devices track by $index">
                <md-card-content>
                    <div class="card-content">
                        <h1 class="md-title">
                                <span>
                                  Device List
                                    <i class="fa fa-crosshairs" aria-hidden="true"></i>{{device.name}}
                                </span>
                        </h1>
                        <div class="device-content-detail">
                            <i class="fa fa-wifi" aria-hidden="true"></i>{{device.connected}}
                            <i class="fa fa-heartbeat" aria-hidden="true"></i>{{device.last_heard}}
                        </div>
                    </div>
                </md-card-content>
        </md-card>

控制器:

appControllers.controller('devicesCtrl', function ($scope,$state,$stateParams,$timeout,$mdDialog,$ionicHistory,$ionicLoading,particle,pDevices,safeparse) {
//$scope.isAnimated is the variable that use for receive object data from state params.
//For enable/disable row animation.
var debug = true;
$ionicLoading.show({
  content: 'Getting Devices',
  animation: 'fade-in',
  showBackdrop: true,
  maxWidth: 200,
  showDelay: 0
});

$timeout(function () {
  pDevices.getpDevices().then(function(data) {
    $scope.p.devices = data;
    if (debug) console.log(debug + 'time out got particle.io device list: ', $scope.p.devices);
    $scope.isLoading = false;
    if (debug) console.log(debug + 'time out complete, hiding ionicLoading: ');
    $ionicLoading.hide();
  }, function() {
    $scope.p.showAlertDialog($event);
    $scope.error = 'unable to load devices'
    });
  }, 2000);

$scope.initialForm = function () {
    //$scope.isLoading is the variable that use for check statue of process.
    $scope.isLoading = true;
    $scope.isAnimated =  $stateParams.isAnimated;
};// End initialForm.

$scope.$watch('p.devices', function (newVal, oldVal){
    console.log(newVal, oldVal)
  });

$scope.p = {
  currentDevice: '',
  deviceId: particle.setDevice(),
  token: particle.setToken(),
  devices: [],

  getDevices: function () {
        pDevices.getpDevices().then(function(deviceList) {
          if (debug) console.log(debug + 'getDevices got particle.io device list: ', deviceList);
          $scope.p.devices = deviceList.data;
        });
      },

  // Select the current device for particle platform
  setDevice: function (deviceId) {
    if (deviceId) {
      if (debug) console.log(debug + 'setDevice', deviceId);
      $scope.p.deviceId = deviceId;
      particle.setDevice(deviceId);
      $scope.startup();
    }
    return $scope.p.deviceId;
  }
};

showAlertDialog = function ($event) {
    $mdDialog.show({
        controller: 'DialogController',
        templateUrl: 'confirm-dialog.html',
        targetEvent: $event,
        locals: {
            displayOption: {
                title: "No Devices Found.",
                content: "Unable to load Device List.",
                ok: "Confirm"
            }
        }
    }).then(function () {
        $scope.dialogResult = "You choose Confirm!"
    });
}// End showAlertDialog.
$scope.initialForm();
});// End of controller Device.

最后工厂被召唤:

appServices.factory('pDevices', function($http, localstorage) {
root_url = 'https://api.particle.io/v1/'
  var getpDevices = function() {
return $http.get(root_url + 'devices').then(function(response){
  console.log('pDevices getpDevices: ', response.data);
  return response.data;
  });
};
  return {
  getpDevices: getpDevices
  };
});

我得到的截图: Resulting View

0 个答案:

没有答案