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

我有一个REST服务，从后端获取数据并在点击通知按钮时向用户显示通知。初始化通知div是隐藏的，当按钮点击它时会显示与REST数据。作为退后一步，我发现REST调用需要一段时间才能加载，并且会导致我的主页加载速度变慢。因为即使没有点击通知按钮的数据将被加载。作为一个解决方案，我集成了ajax来加载通知div内容。在ajax调用我加载html页面到通知div使用ajax。当使用Ajax加载页面内容时，AngularJS REST服务不起作用

AJAX代码片段时通知按钮点击

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

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

在notification.html我称之为REST service.But问题是，页面加载成功，但REST调用不execute.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> 

    <!-- notification & tasks content --> 
    <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>

来源

2015-11-17 gihan

您使用jQuery加载Ajax。看看$ http或$资源服务。 Angular有更好的承诺，并完全集成角 – Shaun

@肖恩相同的代码片段工作正常，当我插入到主页page.so我的REST服务工作正常，但问题是当我插入代码片段到另一个页面我的REST服务不执行。 – gihan

感谢@gihan。更多的一般性评论你做错了。 – Shaun

你尝试$ HTTP的角度，而不是使用jQuery的功能？

在控制器：

$scope.clickcall = function() { 
$http({ 
    method: 'GET', 
    url: '/notify/notification.html' 
    }).then(function successCallback(response) { 
     //Do what ever you want with returned data// 
     console.log(response); 
    }); 
};

和使用NG单击事件这个范围$功能。

来源

2015-11-17 10:39:19

我认为angularJS不知道$.ajax()要求，这是不是在角范围内，所以如果你想运行它angularJS里面$scope.$apply(function(){ ... })添加如下代码：

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

来源

2015-11-17 10:55:42

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

回答

相关问题