javascript - AngularJS/jQuery - 更新范围

Question

我正在开发一个使用 jQuery 的遗留系统，并且必须为特定功能添加 AngularJS，但是我在更新范围时遇到问题。

基本上，我们有一个下拉菜单，当您选择一个选项时，我们将触发 Ajax 调用来获取数组或对象。然后，这个对象数组被存储在一个全局变量中，例如 var myObjs。基本上使用 Angular 的 ng-repeat 服务，我需要循环这些并渲染一个列表。

我是 Angular 新手，所以我不确定这是否是正确的方法。我正在做的是以这种方式设置范围:

$scope.myObjs= myObjs;

但是，这样做后，范围根本不会改变。

有人可以告诉我如何做到这一点吗？我试着环顾四周，但发现在同一页面上混合使用 AngularJS 和 jQuery 有点奇怪。

编辑:添加示例片段。基本上，在更改下拉列表时，我会触发 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

给 ul 一个 ID <ul id="Mylist">并在回调函数中添加以下代码。

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