Question

我有一个REST服务，从后端获取数据，并在点击通知按钮时向用户显示通知。最初通知div是隐藏，当按钮单击它将显示REST数据。作为退回我已经找到了REST调用需要一些时间来加载，这将导致我的主页加载速度变慢。因为即使没有点击通知按钮数据也会被加载。作为一个解决方案我集成了ajax来加载通知div内容。在ajax调用中我使用ajax将html页面加载到通知div中。

当通知按钮单击

时，

ajax代码段

<script>
    $(function() {
        $("label").click(function() {

            $.ajax({
                url: "notify/notification.html",
                success: function(result) {
                    $(".ajax-notifications").html(result);
                }
            });
        });
    });
</script>

在notification.html中我调用REST服务。但问题是页面成功加载但REST调用没有执行.Even在控制台中没有显示任何错误。我是Angularjs的新手，感谢任何帮助或任何想法以更好的方式做到这一点。

主页

<div class="ajax-dropdown" style="left: 128px;"> <div class="btn-group btn-group-justified" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="activity" id="javascript:void(0)"> Notifications (0) </label> </div>  <div class="ajax-notifications custom-scroll"> <div class="alert alert-transparent"> No Notification or Tasks available at this time. </div> </div> </span> </div>

通知html

<!DOCTYPE html> <html ng-app="postExample"> <head> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.js"></script> <script type="text/javascript" src="js/usersController.js"></script> <script type="text/javascript" src="js/userRepoService.js"></script> </head> <body ng-controller="UsersController"> <h1>Notifications</h1> <select id="UserSelector" style="width: 100%;"> <option ng-repeat="user in users" value="{{user.displayName}}">{{user.displayName}}</option> </select> </body> </html>

Answer 1

您是否尝试使用$ http函数而不是使用jQuery？

在控制器上：

{{1}}

并将此$ scope函数用于ng-click事件。

Answer 2

我认为angularJS不知道$.ajax()请求，并且它不在角度上下文中，因此如果您想使用angularJS运行它，请在$scope.$apply(function(){ ... })内添加您的代码，如下所示：

$scope.$apply(function(){
    $.ajax({
            url: "notify/notification.html",
            success: function(result) {
                $(".ajax-notifications").html(result);
            }
        });
});

使用Ajax加载页面内容时，AngularJS REST服务不起作用

2 个答案: