2016-08-14 32 views
0

我已經閱讀了有關此特定主題的更多教程和帖子,但我仍然無法承認,但我仍然無法找到解決方案。在綁定到$ scope.p.devices的鏈接的promise返回之後,我需要刷新視圖。我曾嘗試禁用緩存視圖(仍然禁用)和其他一些解決方案。希望有人在這裏指出我的方向。從工廠成功http.get後看不到刷新(鏈接使用的承諾)

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

你試過'$範圍$適用();'?有時需要對範圍進行微調,以使其需要刷新。 – Aron

+0

我有,但在我所有的閱讀中,我發現它通常被認爲是一種不好的做法。當我嘗試它時,我得到一個摘要已經在進行中的錯誤。 – LukeUSMC

+0

在'$ timeout'中,代碼執行'$ scope.p.devices = data;'。 '$ scope.p.getDevices'函數執行'$ scope.p.devices = deviceList.data;'。哪一個給你帶來問題? – georgeawg

回答

0

原來,問題是完全在我的HTML/SASS div標籤,以及我的對象數組這是不是設備,而是對象。這是工作,但需要一些格式更正。

<ion-view cache-view="false" title="Device List"> 
<!--note list section--> 
<ion-content id="device-list-content" class="bg-white"> 
    <md-list> 
     <md-card class="card-item" 
      collection-repeat="Object in p.devices" 
      collection-item-height="136px" 
      collection-item-width="100%"> 
      <md-divider></md-divider> 
      <md-card-content> 
       <div class="card-content"> 
       <h1 class="md-title-device"> 
         <span> 
          <i class="fa fa-crosshairs" aria-hidden="true"></i> {{Object.name}} 
         </span> 
       </h1> 
       <div class="device-content-detail"> 
        <div ng-show="Object.connected"> 
        <i class="fa fa-wifi" aria-hidden="true"></i> 
        <i class="fa fa-heartbeat" aria-hidden="true"></i>{{Object.last_ip_address}} 
        </div> 
        <div ng-show="!Object.connected"> 
        <i class="fa fa-wifi" aria-hidden="true"></i> 
        <i class="fa fa-heart-o" aria-hidden="true"></i>{{Object.last_heard}} 
        </div> 
       </div> 
       </div> 
      </md-card-content> 
      </md-card> 

    </md-list> 
</ion-content>