Javascript 如何从控制器更新集合数组中的模型

我理解Angular非常自然地允许用户交互来更新模型。事实上，关于它已经有很多问题了，所以

在这种情况下，用户必须通过视图与模型交互

但是，由于来自控制器的编程内容，如何修改集合中的模型？例如。。。假设我正在构建一个某种类型的加载器，每个加载器都有一个唯一的进度编号。当用户开始加载某些内容时，加载事件将添加到过去加载事件的集合中。现在，我想通过ajax对loader.progress进行一些更新

因此，视图将显示如下内容：

Loading Assets:
=====================================
Loader 1 ------------ 53%
Loader 2 ------------------------ 91%
Loader 3 -- 9%
Loader 4 --------- 43%

$scope.loaders = [
    { asset: "somePicture.jpg", progress: 53 },
    { asset: "movie.mov", progress: 91 },
    { asset: "someProgram.torrent", progress: 9 },
    { asset: "etc.txt", progress: 43 }
];

模型的集合是这样的：

Loading Assets:
=====================================
Loader 1 ------------ 53%
Loader 2 ------------------------ 91%
Loader 3 -- 9%
Loader 4 --------- 43%

$scope.loaders = [
    { asset: "somePicture.jpg", progress: 53 },
    { asset: "movie.mov", progress: 91 },
    { asset: "someProgram.torrent", progress: 9 },
    { asset: "etc.txt", progress: 43 }
];

当我第一次启动一个新的加载程序时，我会这样将它添加到集合中：

$scope.loaders.push({ asset: "reallyCoolSong.mp3", progress: 0 });

当然，下一步是在ajax函数完成后更新reallyCoolSong.mp3的进度

---

我该怎么做呢？

我设置了一个演示程序，您应该可以在此基础上进行构建。。。我只是使用$timeout来简化事情，但这可能是基于AJAX调用更新进度的地方

// Code goes here

angular.module("myApp",["ui.bootstrap"]).directive("progressLoader", function($timeout){
  return {
    restrict: "E",
    scope: {file:"@"},
    link: function(scope, element, attrs){
      scope.progress = 0;
      function updateProgress(){
        scope.progress++;
        if(scope.progress<100)
          $timeout(updateProgress,100);
      }
      updateProgress();

    },
    template: "<div>{{file}}</div><progressbar value=\"progress\"></progressbar>"
  }  
});

//代码在这里
angular.module（“myApp”，“ui.bootstrap]”）指令（“progressLoader”，函数（$timeout）{
返回{
限制：“E”，
作用域：{file:@}，
链接：函数（范围、元素、属性）{
scope.progress=0；
函数updateProgress（）{
范围.progress++；
如果（scope.progress只是与OO保持一致，那么您可以在工厂中拥有一个loading bar对象。该对象在其自身的方法中使用$http或$.ajax之类的服务进行更新，而无需跟踪索引。如果您使用
$.ajax
，只需知道您需要使用

if(!$rootScope.$$phase)$rootScope.$apply() 

方法从
$.ajax
的xhr进度事件触发摘要循环。或者您可能已经有了这样的机制

这里是一个关于一般想法的例子
我认为你可能在头脑中把事情复杂化了。你所需要做的就是更新你想在视图中更新的对象的属性，它会自动导致视图在你绑定到该属性的任何地方刷新。因此，你所描述的方法就行了。如果你使用$http angular将通过调用apply自动标记摘要周期。如果您在angular服务之外执行异步操作，则只需在完成后调用$scope.$apply（）。但实际上，我无法从视图中进行更新…用户没有“更新”下载的进度…下载本身正在由ajax进行更新。因此，在控制器中，我需要在
$scope.loaders
中维护某些模型的数组索引，然后通过说
$scope.loaders[index]来更新它.progress=12
？您不需要从视图进行更新。您尝试过您的解决方案吗？在我看来，这似乎是正确的方法。您的ajax响应会触发一个更新加载程序进度的函数。因为没有用户交互，您可能需要使用$scope。$applyI了解您在维护每个视图的索引方面存在的问题AJAX调用。将执行AJAX调用的代码和进度条打包成一个自定义指令可能是值得的。这样，指令的每个实例都会进行AJAX调用并更新它自己的独立范围。构建指令可能需要更多的工作，但允许您重用组件。下面是另一个解决方案