从服务中刷新$ scope变量

时间:2015-02-20 20:23:13

标签: angularjs

刷新从服务检索的数据的正确方法是什么?我正在从我的dataService检索测试数组,我希望在我的save()方法被调用时自动更新。我已经注释了应该更新我的$ scope变量的行但是没有任何变化。我应该将它包装在$ apply()吗?

放入dataService.getActivities()返回的数组的数据来自cookie(可能相关或不相关)。

app.controller("activityCtrl", ["$scope", "dataService", function ($scope, dataService) {

    $scope.newActivity = "";
    $scope.activities = dataService.getActivities();

    $scope.save = function (activity) {

        try{
            if (activity != "") {
                dataService.saveActivity(activity);

                $scope.newActivity = "";
                $scope.activities = dataService.getActivities(); //HERE
            }
        } catch (e) {
            alert(e);
        }        
    }
}

以下是我的观点,该数组位于ng-repeat

<div class="col-xs-12" ng-controller="activityCtrl">
    <div class="row text-center">
        <form novalidate>
            <input type="text" placeholder="Activity name" ng-model="newActivity" />
            <input type="submit" value="Add activity" ng-click="save(newActivity)" />
        </form>            
    </div>
    <div class="row" ng-controller="activityCtrl">
        <div class="col-xs-2">&nbsp;</div>
        <div class="col-xs-6 text-left">
            <div class="row" ng-repeat="activity in activities">
                <div class="btn btn-default" ng-class="{ active : activity.active }" ng-click="activate(activity)">{{ activity.name }}</div>
            </div>
        </div>
        <div class="col-xs-4 text-left">
            sdfas
        </div>
    </div>
</div>

dataService代码:

app.service("dataService", function () {

this.getActivities = function () {

    if (docCookies.hasItem("activities")) {

        var activities = JSON.parse(docCookies.getItem("activities"));

        if (activities.constructor != Array) {

            activities = [activities];
        }

        activities.sort(
            function (a, b) {
                if (a.name > b.name) { return 1; }
                if (b.name < a.name) { return -1; }
                return 0;
            });

        return activities;
    }

    return [];
}

this.saveActivity = function (activity) {

    if (!docCookies.hasItem("activities")) {

        docCookies.setItem("activities", [JSON.stringify({ "name": activity, "active": true })], Infinity);
    } else {

        var activities = this.getActivities();

        for (var i = 0; i < activities.length; i++) {

            if (activities[i].name == activity) {
                throw "Activity already exists";
            }
        }

        activities.push({ "name": activity, "active": false });
        docCookies.setItem("activities", JSON.stringify(activities), Infinity);
    }

};
});

2 个答案:

答案 0 :(得分:1)

扎克,你的答案应该适合你。作为另一种选择,我喜欢在我的服务更新时广播一个事件。在服务中saveActivity()函数的最后一行,尝试在rootScope上广播一个事件。将$ rootScope注入您的服务。将以下内容添加到您的保存方法:

$rootScope.$broadcast('activitiesUpdated');

然后在你的控制器中,注入$ rootScope并添加一个事件处理程序:

$rootScope.$on('activitiesUpdated', function(event, args){
     //Update $scope variable here
});

答案 1 :(得分:0)

答案是通过调用$watch而不是返回对象的方法来查看cookie值。在我的activityCtrl

中添加了此内容
$scope.$watch(function () {

    return docCookies.getItem("activities");
}, function (oldVal, newVal) {

    $scope.activities = dataService.getActivities();
});