2016-08-14 2 views
0

私はこの特定の件名について、私が気にするよりも多くのチュートリアルと記事を読んだが、まだ解決策を見つけることができませんでした。 $ scope.p.devicesにバインドされた連鎖した約束が返された後に、更新するためのビューが必要です。私はキャッシュされたビュー(まだ無効)と他の多くのソリューションを無効にしようとしました。誰かをここに仰ぐと、私は正しい方向に向けることができます。工場からの成功した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. 

そして最後に工場が呼び出されている:

0123私は何を得るの
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> 

関連する問題