AngularJS/jQuery的 - 更新範圍

Question

我的工作使用jQuery的遺留系統上，不得不添加AngularJS爲特定的功能，但是即時通訊在更新範圍的問題。

基本上，我們有一個下拉菜單，當您選擇一個選項時，我們會觸發一個Ajax調用來獲取數組或對象。然後將這個對象數組存儲在一個全局變量中，比如var myObjs。基本上使用Angular的ng-repeat服務，我需要遍歷這些並呈現一個列表。

我是新來的角，所以我不知道這是否是做的方式。我做的是這樣設定範圍：

$ scope.myObjs = myObjs;

然而，通過這樣做，範圍沒有改變的。

有人能告訴我如何做到這一點嗎？我試圖環顧四周，但發現它有點hacky在同一頁面上混合使用AngularJS & jQuery。

編輯：添加樣本片段。基本上改變下拉im發射ajax調用，並將響應（這是一個對象數組）存儲在myObjs變量中。然後我試圖將範圍設置爲這個變量的值。關於我引導Angular的方式，這是由於8年前的傳統系統的限制。

var myObjs = null; 
 

 

 
$(function() { 
 
    $("#myHeader").on("change", "#mySelect", function() { 
 
    // perform Ajax Call 
 
    }); 
 

 
}); 
 

 
function ajaxCallback(data) { 
 
    myObjs = data; 
 
} 
 

 
var myModule = angular.module("GetObjsModule", []); 
 
myModule.controller("MyController", function($scope) { 
 
    $scope.objs = myObjs; 
 
}); 
 

 
angular.element(document).ready(function() { 
 
    var myDiv = $("#myDiv"); 
 
    angular.bootstrap(myDiv, ["GetObjsModule"]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> 
 
</script> 
 

 
<div id="myHeader"> 
 
    <select id="mySelect"> 
 
    <option value="1">Value 1</option> 
 
    <option value="2">Value 2</option> 
 
    <option value="3">Value 3</option> 
 
    </select> 
 
</div> 
 

 
<div id="myDiv"> 
 
    <ul id="myList" ng-controller="MyController"> 
 
    <li ng-repeat="x in objs"> 
 
     <div class="accordionHeader"> 
 
     {{x.name}} {{x.surname}}: {{x.tel}} 
 
     </div> 
 
     <div> 
 
     <p> 
 
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum 
 
      a velit eu ante scelerisque vulputate. 
 
     </p> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

舉一個ID爲UL <ul id="Mylist">，並在回調函數中添加下面的代碼。

angular.element(document.getElementById('Mylist')).scope().$apply(function(scope){ 
    scope.objs = myObjs; 
}); 

Answer 2

這是相當困難來自jQuery和處理的思維角度的方式。

基本上，要實現你想要的，你根本不需要jQuery。

<div ng-controller="MyController"> 
<div id="myHeader"> 
    <select id="mySelect" ng-change="yourUpdateFunction()"> 
    <option value="1">Value 1</option> 
    <option value="2">Value 2</option> 
    <option value="3">Value 3</option> 
    </select> 
</div> 

<div id="myDiv" ng-show="requestLoaded"> 
    <ul> 
    <li ng-repeat="x in objs"> 
     <div> 
     {{x.name}} {{x.surname}}: {{x.tel}} 
     </div> 
     <div> 
     <p> 
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum 
      a velit eu ante scelerisque vulputate. 
     </p> 
     </div> 
    </li> 
    </ul> 
</div> 
</div> 

所以基本上：

1. 我包你的代碼放到一個div，其中將包含您的控制器
2. 我用ngChange指令您選擇的元素上運行的更新功能

然後，JS部分：

var myApp = angular.module("myApp", []); 
myApp.controller("MyController", function($scope, $http) { 
    $scope.objs; 
    $scope.requestLoaded = false; 
    $scope.yourUpdateFunction = function() { 
    // Here you can run a $http request, based on value of select. 
    $http.get('/someUrl').success(function(data, status, headers, config) { 
     $scope.objs = data; 
     $scope.requestLoaded = true; 
    }); 
    } 
}); 

一言以蔽之：$scope.yourUpdateFunction上改變你的選擇元件（ngChange指令）上運行。它執行一個異步http請求並將其響應數據設置爲$scope.objs（因此，從現在開始，您可以在視圖中顯示它）。然後，$scope.requestLoaded用於顯示/隱藏您的列表。當http請求被加載時，它的false，列表被隱藏，當它完成時，列表被顯示，它是指令ngShow。

這是一個基本的例子，但這種方式，你可以實現你想要的。

請記住，AngularJS提供雙向數據綁定，無論何時在視圖中更改某些內容時，都會在控制器中進行更新，反之亦然。