AngularJS:使用服务

时间:2016-04-08 15:07:28

标签: angularjs service

我在AngularJS中遇到服务问题。 作为一个新手,它可能是我在这里失踪的关键。

标题{{p01g.visiteTitel}}并不神奇,但仍在显示" sometitle"。

ng-repeat按预期工作。

(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>

2 个答案:

答案 0 :(得分:0)

我完全复制了您的代码并创建了一个plunkr并添加了我自己的dataFactory来返回示例数据,并且没有错误且数据受到严格限制,因此我认为问题出在您的身上dataFactory的实现,或者你调用它的方式(确保它期待一个回调函数,因为这就是你传递它的东西)。

修改:这是一个新的plunkr,其中包含我认为可以重现您的问题的更新代码。所以标题没有得到更新的原因是因为

vm.visiteTitel = p00Service.visiteTitel;

vm.visiteTitel设置为p00Service.visiteTitel中字符串的值,但获取对p00Service.visiteTitel的引用,因此如果您更新visiteTitel在此p00Service之后的$resource中(因为vm.visiteTitel回调是异步的,因此会发生这种情况),然后它对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

此代码可以稍微清理一下,但这是一个可行的plunkr,证明vm.visiteTitel和{{1}}正确更新。

答案 1 :(得分:0)

dataFactory看起来像这样:

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