@LukeUSMC wrote:
I have read so many tutorials, tried countless permutations and still cannot figure out what I am doing wrong. The view loads but never gets refreshed after the promise is returned from my factory. Have tried to create a fiddle/plunker but still learning and don't know how to cut this down to a simpler version.
HTML (tried ng-repeat and ionic-collection
<ion-content id="device-list-content" class="fade-in"> Device List <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> </ion-content> <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>
Controller
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'); $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.
Factory
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 }; });
Gets me this:
Posts: 1
Participants: 1