AngularJS:使用服务时数据绑定未按预期工作

我在AngularJS的服务方面遇到了麻烦。 作为一个新手，这可能是我在这里错过的一些重要的东西

标题{p01g.visiteTitel}并没有神奇地刷新，但一直显示“sometitle”

ng重复按预期工作

（dataFactory是一种使用$resource连接到远程服务器的服务）

我的服务：

myApp.service('p00Service', ['dataFactory', function(dataFactory) {

    var service = this;

    service.visites = [];
    service.visiteAantal = 0;
    service.visiteTitel = "sometitle";

    service.findVisites = function (datum) {

        dataFactory.get({verb: "search", q: datum}, function (data) {
            angular.copy(data.visites, service.visites);
            service.visiteAantal = service.visites.length;
            if (service.visiteAantal === 0) {
                service.visiteTitel = "geen visites op " + datum
            } else if (service.visiteAantal === 1) {
                service.visiteTitel = "1 visite op " + datum
            } else {
                service.visiteTitel = service.visiteAantal + " visites op " + datum
            }
        });

    };

}]);

我的控制器：

myApp.controller('p01gCtrl', ['p00Service', function (p00Service) {

    var vm = this;

    var datum = moment();  //I'm using moment.js -> moment() is date of today

    p00Service.findVisites(datum);

    vm.visites = p00Service.visites;
    vm.visiteTitel = p00Service.visiteTitel;

}]);

我的HTML：

<div class="p01g" ng-controller="p01gCtrl as p01g">

    <div class="well_grey" style="min-height:40px;max-height:40px;max-width:330px">

        <p style="font-size:20px;text-align:center;cursor:pointer;">

                {{p01g.visiteTitel}}

        </p>

    </div>

    <div class="well" style="min-height:190px;max-height:190px;max-width:330px">

        <table style="width:100%;line-height:40px">

                <tbody ng-repeat="visite in p01g.visites">

                    <tr>
                        <td style="width:20%;line-height:40px;padding-left:7px"><span style="font-size:16px">{{visite.t133datum | date:"dd/MM/yy"}}</span></td>
                        <td style="width:60%;line-height:40px;text-align:center"><span style="font-size:16px">{{visite.t133achternaam}}</span></td>
                        <td style="width:20%;line-height:40px;padding-left:30px"><span style="font-size:16px">{{visite.t133classificatie}}</span></td>
                    </tr>

                </tbody>

        </table>

    </div>


</div>

{{p01g.visiteTitel}

{{visite.t133datum}日期：“dd/MM/yy”}
{{visite.t133achternaam}
{{visite.t133分类}

我准确地复制了您的代码，创建了一个，并添加了我自己的

数据工厂

，以返回样本数据，没有错误，数据绑定良好，因此我相信问题在于您对

数据工厂

的实现，或者您对它的调用方式（确保它需要一个回调函数，因为这就是您要传递它的内容）

编辑：这里有一个新的更新代码，我相信它再现了您的问题。因此，标题没有更新的原因是

vm.visiteTitel = p00Service.visiteTitel;

正在将

vm.visitetel

设置为

p00Service.visitetel

中字符串的值，但未获取对

p00Service.visitetel

的引用，因此如果您在此分配之后在

p00Service

中更新

visitetel

（在本例中发生这种情况是因为

$resource

回调是异步的），那么它对

vm.visitetel

没有影响

实现此功能的一种方法是将回调传递给

p00Service

，以更新控制器值，如下所示：

p00Service.findVisites(datum, function(visites, visiteTitel) {
    vm.visites = visites;
    vm.visiteTitel = visiteTitel;
});

然后更新服务以在加载数据后调用此回调：

service.visites = [];
service.visiteAantal = 0;
service.visiteTitel = "sometitle";

service.findVisites = function (datum, callback) {

    dataFactory.get({}, function (data) {
    ...

        if(callback) {
            callback(service.visites, service.visiteTitel);
        }
    });

};

---

此代码可以稍微清理一下，但下面是一个可行的示例，演示如何正确更新

vm.visites

和

vm.visitettel

。

数据工厂如下所示：

myApp.factory("dataFactory", ['$resource', function ($resource) {
    return $resource("/vf/rest/visites/:verb", {}, {
        get: {method: "GET", isArray: false, cache: false}
    });
}]);

---

如果你有更多关于

数据工厂
外观的信息，那么就更容易找出问题。我相应地更新了我的答案。@GDM_70我更新了我的答案，在那里我重现了问题并给出了一个可能的解决方案。哇，非常感谢你，我永远无法独自解决这个问题！现在我明白发生了什么，你知道了吗救了我一天（一周…）