关闭模态时更新$ scope集合

时间:2015-10-16 07:03:34

标签: javascript angularjs angularjs-model

我最难找到一种方法来确保使用模态中保存的信息更新父范围的集合。

父母有一组事件发言人,模态为活动增加了一位发言人。我希望在单击模态确定按钮后将新扬声器添加到页面中。

保存数据并关闭模态,但除非我刷新页面,否则模型不会更新。

这是我的控制器方法,用于更新扬声器的集合。 $scope.speakers绑定到页面中的重复对象。

$scope.updateSpeakersList = function () {
    factory.callGetService("GetSpeakers?eventId=" + $scope.event.eventId)
        .then(function (response) {
            var fullResult = angular.fromJson(response);
            var serviceResponse = JSON.parse(fullResult.data);

            $scope.speakers = serviceResponse.Content;

            LogErrors(serviceResponse.Errors);
        },
        function (data) {
            console.log("Unknown error occurred calling GetSpeakers");
            console.log(data);
        });
}

这是模式应该调用前一个方法的承诺,因此更新页面。

$scope.openModal = function (size) {
    var modalInstance = $modal.open({
        templateUrl: "AddSpeakerModal.html",
        controller: "AddSpeakerModalController",
        size: size,
        backdrop: "static",
        scope: $scope, 
        resolve: {
            userId: function() {
                return $scope.currentUserId;
            },
            currentSpeaker: function () {
                return ($scope.currentSpeaker) ? $scope.currentSpeaker : null;
            },
            currentSessions: function () {
                return ($scope.currentSpeakerSessions) ? $scope.currentSpeakerSessions : null;
            },
            event: function () {
                return $scope.event;
            },
            registration: function() {
                return $scope.currentUserRegistration;
            }
        }
    });

    modalInstance.result.then(function (savedSpeaker) {

        $scope.savedSpeaker = savedSpeaker;

        $scope.updateSpeakersList();

    }, function () {
        console.log("Modal dismissed at: " + new Date());
    });
};

为什么模型没有更新?

3 个答案:

答案 0 :(得分:0)

如果没有重现问题的最小示例,很难确定,但问题可能在于您正在更新“阴影范围”。这是Javascript中的一种特殊性,它导致对象被复制而不是被修改。

$scope.$apply()进行更改后尝试添加updateSpeakerList()

答案 1 :(得分:0)

查看此帖子,然后玩它。 AngularJS - Refresh after POST

对我来说有用的是在成功后将数据推送到我的范围然后设置位置,所以在发布新数据后我的看起来像:

$scope.look.push(data);
$location.path('/main');

答案 2 :(得分:0)

这里的问题不是我的数据不一定更新......真正的问题是,我试图更新它的时刻是我的应用程序如何放在一起的错误时刻。我试图在更新可用之前更新底层模型,但没有意识到。 AJAX调用仍在进行中。

在我的模态中,单击“确定”后,它会运行几个不同的GET和POST。我在这些调用之外调用更新,假设一旦AJAX调用完成就会按顺序调用它。 (这是错误的。)

一旦我将$scope.updateSpeakersList()电话移到我工厂的最终AJAX成功电话中,一切似乎都按预期工作。