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提供双向数据绑定，无论何时在视图中更改某些内容时，都会在控制器中进行更新，反之亦然。