javascript - 为什么一个外部更新的数组不会自动刷新？

Question

我有一个处理一些逻辑的 js 类，并尝试以 Angular 使用它，以便它可以在值更改不起作用时自动更新，只有当我使用 Angular 函数时才有效，引用没问题，但我确实需要当数组在外部发生变化时，还有其他事情可以告诉 angular 我需要它来监听。谢谢!

http://jsfiddle.net/9k2zw1ar/

//create class exposed to window
(function(w){

    var Foo=function(){
        this.add=function(){
            Foo.arr.push('js-'+(Math.random() * 100));
        }
    }
    Foo.arr=['a','b','c'];
    w.Foo=Foo;
})(window);
//instantiate one class , used in button
var foo=new Foo;
//angular app
var App= angular.module('App',[]);
//add array reference using "Value" 
App.value('arr',Foo.arr);
//angular controller
App.controller('ClientController', ['$scope','arr', function($scope,arr) {
  $scope.markers = arr;
  $scope.add=function(){
    arr.push('ng-'+(Math.random() * 100));
  };
}]);

这是html代码

<div ng-app="App" >

<div ng-controller="ClientController">

  <div  ng-repeat='marker in markers'>
              <p> {{marker}}</p>

  </div>
    <button ng-click='add()'>add NG</button>
    <button  onclick="foo.add()">add js</button>
</div>

</div>

问题:当我使用“添加 JS”按钮更改数组时，它不会自动更新。但是当我按下“添加 ng”按钮时，数组会立即显示并更新。

Answer 1

问题是，当您从 Angular 应用程序外部更改数组时，它不知道某些内容已更改。通常你需要通知它，所以范围需要更新它的观察者。您需要做的就是手动触发摘要循环，例如通过在根作用域上调用 $apply 方法。

唯一棘手的部分是您需要从外部以某种方式访问​​作用域。要访问应用程序的根范围，您需要调用 angular.element(appRoot) 元素的 scope 方法。其中 appRoot 是应用程序注册的 DOM 元素(ng-app 属性)。例如这样的事情:

var Foo = function () {
    this.add = function () {
        Foo.arr.push('js-' + (Math.random() * 100));
        this.apply();
    };

    this.apply = function() {
        var appRoot = document.querySelector('[ng-app]');
        angular.element(appRoot).scope().$apply();
    };
}

演示:http://jsfiddle.net/9k2zw1ar/1/