Question

我是angularjs的初学者。在我的NFC项目中，我希望能够根据不断变化的patientId从服务器数据中获取。

但是，即使我看到每次扫描新的NFC标签时$watch都发生了变化，我也无法正确执行patientId执行。

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的推荐，我创建了一个对象来保存工厂内的数据，现在html（有一些服务器端延迟）在扫描新的NFC标签时正确显示更新的值。

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

您的代码不会更新返回的patientId中的NfcService值，只会更新工厂函数中的本地变量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的基本事实是，当您将一个变量分配给另一个变量时，如果第一个变量具有原始数据值，则第二个变量获取该值的副本，因此更改第一个变量不会在那之后影响第二个变量，但是如果第一个变量有一个对象引用，则第二个变量指向第一个变量所指向的同一个对象，然后在第一个变量中更改对象会影响你通过第二个变量，因为它正在查看同一个对象。

浏览器JavaScript控制台中的快速实验可以为您提供这样的想法：

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

VS

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

$ scope。$ watch似乎没有看工厂变量

1 个答案: