Question

据我所知，Angular自然允许用户交互更新模型。事实上，关于它的问题很多，here's one of those questions。

在该场景中，用户必须通过视图与模型进行交互。

但是，如何通过控制器中的程序化修改集合中的模型？例如...让我说我正在构建一种带有与每个加载器相关联的唯一进度号的某种加载器。当用户开始加载某些内容时，load事件将添加到过去加载事件的集合中。现在，我想通过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 }
];

当我第一次启动一个新的加载器时，我会以这种方式将它添加到集合中：

$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

Answer 2

只需与OO保持一致，您就可以在工厂中拥有一个加载栏对象。它使用像$ http或$ .ajax这样的服务，在一个自身更新的方法中，放弃跟踪索引的需要。如果您使用$.ajax只需知道您需要使用

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

从$.ajax的xhr进度事件中启动摘要周期的方法。或许你已经有了一个机制。

这是一个具有一般想法的plunker

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

2 个答案: