javascript - 如何从 Controller 更新集合数组中的模型

Question

我知道 Angular 真的很自然地允许用户交互来更新模型。事实上，SO 上已经有很多关于它的问题，here's one of those questions .

在那种情况下，用户必须通过 View 与模型交互。

但是我怎样才能根据来自 Controller 的某些程序来修改集合中的模型呢？例如...假设我正在构建某种装载机，每个装载机都有一个唯一的进度号。当用户开始加载某些内容时，加载事件将添加到过去加载事件的集合中。现在，我想通过 ajax 对 loader.progress 进行一些更新。

所以 View 会显示如下内容:

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 的进度。

我该怎么做？

Answer 1

我设置了一个演示，您应该可以在此基础上构建...我只是使用 $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>"
  }  
});

http://plnkr.co/edit/f2FBBiMYtA6YU46uKbvb?p=preview