當使用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服務不起作用

回答

相關問題