$ scope。$ watchは工場変数を監視していないようです

Question

私は初心者angularjsです。私のNFCプロジェクトでは、変更するpatientIdに基づいてサーバーデータからGETできるようにしたいと考えています。

しかし、新しいNFCタグをスキャンするたびにpatientIdが変更されることがわかりましたが、私は$watchが正しく実行されているのを見ることができません。

var nfc = angular.module('NfcCtrl', ['PatientRecordsService']) 

nfc.controller('NfcCtrl', function($scope, NfcService, PatientRecordsService) { 
    $scope.tag = NfcService.tag; 
    $scope.patientId = NfcService.patientId 
    $scope.$watch(function() { 
     return NfcService.patientId; 
    }, function() { 
     console.log("Inside watch"); 

     PatientRecordsService.getPatientRecords(NfcService.patientId) 
     .then(
      function(response) { 
       $scope.patientRecords = response 
      }, 
      function(httpError) { 
       throw httpError.status + " : " + 
        httpError.data; 
      }); 
    }, true); 
    $scope.clear = function() { 
     NfcService.clearTag(); 
    }; 
}); 

nfc.factory('NfcService', function($rootScope, $ionicPlatform, $filter) { 

    var tag = {}; 
    var patientId = {}; 

    $ionicPlatform.ready(function() { 
     nfc.addNdefListener(function(nfcEvent) { 
      console.log(JSON.stringify(nfcEvent.tag, null, 4)); 
      $rootScope.$apply(function(){ 
       angular.copy(nfcEvent.tag, tag); 
       patientId = $filter('decodePayload')(tag.ndefMessage[0]); 
      }); 
      console.log("PatientId: ", patientId); 
     }, function() { 
      console.log("Listening for NDEF Tags."); 
     }, function(reason) { 
      alert("Error adding NFC Listener " + reason); 
     }); 
    }); 

    return { 
     tag: tag, 

     patientId: patientId, 

     clearTag: function() { 
      angular.copy({}, this.tag); 
     } 
    }; 

}); 

私がここで紛失していることがわかりません - 私を啓発してください！ raksliceの勧告パー

更新 、私は工場内の私のデータを保持するオブジェクトを作成し、新しいNFCタグがスキャンされたときに、今（いくつかのサーバー側の遅延で）HTMLが正しく更新された値を表示します。

var nfc = angular.module('NfcCtrl', ['PatientRecordsService']) 

nfc.controller('NfcCtrl', function($scope, NfcService) { 
    $scope.tagData = NfcService.tagData; 
    $scope.clear = function() { 
     NfcService.clearTag(); 
    }; 
}); 

nfc.factory('NfcService', function($rootScope, $ionicPlatform, $filter, PatientRecordsServi\ 
ce) { 

    var tagData = { 
     tag: null, 
     patientId: null, 
     patientRecords: [] 
    }; 

    $ionicPlatform.ready(function() { 
     nfc.addNdefListener(function(nfcEvent) { 
      //console.log(JSON.stringify(nfcEvent.tag, null, 4)); 
      $rootScope.$apply(function() { 
       tagData.tag = nfcEvent.tag; 
       tagData.patientId = $filter('decodePayload')(tagData.tag.ndefMessage[0]); 
       PatientRecordsService.getPatientRecords(tagData.patientId) 
        .then(
         function(response) { 
          tagData.patientRecords = response 
         }, 
         function(httpError) { 
          throw httpError.status + " : " + 
           httpError.data; 
         }); 
      }); 
      console.log("Tag: ", tagData.tag); 
      console.log("PatientId: ", tagData.patientId); 
     }, function() { 
      console.log("Listening for NDEF Tags."); 
     }, function(reason) { 
      alert("Error adding NFC Listener " + reason); 
     }) 
    }); 

    return { 
     tagData: tagData, 
     clearTag: function() { 
      angular.copy({}, this.tagData); 
     } 
    }; 
}); 

Answer 1

あなたのコードが返さNfcServiceでpatientId値、ファクトリ関数内のローカル変数のみpatientIdを更新しません。

返すオブジェクトへの参照をローカル変数と同じようにファクトリ関数で保存し、それを使用してpatientIdを更新してみてください。その後、

var nfcService = { 
     tag: tag, 

     patientId: patientId, 

     clearTag: function() { 
      angular.copy({}, this.tag); 
     } 
    }; 

...

return nfcService 

との値を変更するpatientIdアップデートを変更します。たとえば

、ローカル変数にそれを置くために、オブジェクトの作成を変更します変数を介してオブジェクト。

nfcService.patientId = $filter('decodePayload')(tag.ndefMessage[0]); 

更新：

あなたが理解する必要があるのJavaScriptに関する基本的な事実は、あなたが別の変数を割り当てるとき、最初の変数は、プリミティブデータ値を持っていた場合、第二の可変コピーを取得することです最初の変数がオブジェクト参照を持っていれば、2番目の変数は、最初の変数が指しているのと同じオブジェクトを指すようになります。それ以降の最初の変数は、同じオブジェクトを参照しているので、2番目の変数から見えるものに影響します。ブラウザのJavaScriptコンソールでの迅速な実験はあなたのアイデア与える必要があり

：

> var a = 1; 
> a 
1 
> var b = a; 
> b 
1 
> a = 5; 
> a 
5 
> b 
1 

対

> var a = {foo: 1} 
> var b = a 
> a.foo = 5 
> a.foo 
5 
> b.foo 
5