Question

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

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

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

$ scope.myObjs = myObjs;

然而，通过这样做，范围根本没有改变。

有人能告诉我这是怎么做到的吗？我试着环顾四周，但我发现它有点hacky有一个混合的AngularJS＆amp; 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

很难从jQuery中获得并处理Angular的思维方式。

基本上，为了达到你想要的效果，你根本就不需要jQuery。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

基本上是这样的：

我将您的代码包装到div中，其中包含您的控制器
我使用ngChange指令在select元素

然后，JS部分：

<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>

简而言之：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; }); } });在select元素（ngChange指令）上进行更改。它执行异步http请求并将其响应数据设置为$scope.yourUpdateFunction（因此，从现在开始，您可以在视图中显示它）。然后，$scope.objs用于显示/隐藏您的列表。当加载http请求时，它是false，列表是隐藏的，当它完成时，列表显示，它是指令$scope.requestLoaded。

这是一个基本的例子，但这样你就可以达到你想要的效果。

请记住，AngularJS提供双向数据绑定，每当您在视图中更改某些内容时，它都会在控制器中更新，反之亦然。

Answer 2

为ul <ul id="Mylist">提供ID，并在回调函数中添加以下代码。

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

AngularJS / jQuery - 更新范围

2 个答案: