Question

我是angularjs的新手。我试图插入一些关于项目的评论。我使用jquery ajax插入评论，并在页面加载时使用angularjs绑定所有评论。我的问题是，我可以在$ .ajax成功后立即刷新或更新ng重复数据

这是我的 jquery

    $("#reviewSubmit").click(function () {
        var reviewData = JSON.stringify({ "Review": $('#txtReview').val() });
        document.cookie = "ScrollPosition=" + $(window).scrollTop();
        $.ajax({
            url: "@Url.Action("MyReview", "ProductDetail")",
            data: reviewData,
            dataType: 'json',
            type: "POST",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (data == true) {
                    alert('Authorized');
                    $("#review_write").hide(250);
                    Test();
                }
                else {
                    var url = "@Url.Action("Login", "Login", new { area = ""})";
                    window.location = url;
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
    });
});

这是我的 Angular js

app.controller('ReviewModel', function ($scope, UserReviews) {
    getReviews();
    function getReviews() {
        UserReviews.getReviews().
        success(function (data) {
            $scope.Reviews = data;
            console.log($scope.Reviews);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });
    }
})

app.factory('UserReviews', ['$http', function ($http) { 

    var UserReviews = {};

    UserReviews.getReviews = function () {
        var url = appurl + "/ProductDetail/GetUserReview";
        return $http.get(url);
    };

    return UserReviews;
    }]);

这是我的查看

                <div ng-app="myApp">
                    <div id="myElementWithController" ng-controller="ReviewModel">
                        <ul ng-repeat="item in Reviews">
                            <li>{{item.Comment}}</li>
                        </ul>
                    </div>
                </div>

Answer 1

这是因为您要从scope方法更新jQuery变量（超出角度上下文）。哪个没有运行消化周期＆amp;绑定没有更新。

使用$http.post代替$.ajax帖子将处理摘要周期。

Answer 2

您可以手动启动摘要周期以同步视图和模型。您可以通过$ apply执行此操作，成功回调，执行某些操作

$scope.$apply();

还有一件事，成功和错误已被弃用，因此请使用标准then

Answer 3

最后我已经解决了。在$ .ajax成功方法中，我编写了以下代码行

var element = angular.element($('#MyElementWithController'));
element.scope().$apply();

它立即影响了DOM。

Answer 4

您可以检查“摘要是否已在进行中”，否则您可以强行运行摘要周期。

if (!$scope.$$phase) {
    $scope.$apply();
    }

您的代码看起来像

 UserReviews.getReviews().then(
                        function(data) {
                                $scope.Reviews = data;
                                if (!$scope.$$phase) {
                                       $scope.$apply();
                                       }
                             }, 
                        function(error) {
                            console.log('error', error);
                        });

如何使用$ .ajax成功刷新ng-repeat

4 个答案: