Question

我有一个简单的角度应用程序，如下所示： html：

<body ng-app>
    <div class="content" ng-controller="LeaderboardCtrl">
        <div class="row" ng-repeat="fb_ranking in fb_rankings">
            <div class="rank cell">{{fb_ranking.rank}}</div>
            <div class="name cell">{{fb_ranking.name}}</div>
            <div class="score cell">{{fb_ranking.score}}</div>
        </div>
    </div>
</body>

和JS：

function change_data(){
    some_data[0].rank = 99;
    var sc = angular.element(document.getElementById('overlay')).scope;
    sc.$apply(function(){
        sc.fb_rankings = some_data;
    });
}

var some_data = [
    {rank: 1, name: 'Boink a doodledo', score: 3000},
    {rank: 2, name: 'Someone else', score: 300},
    {rank: 3, name: 'Donkey', score: 30},
    {rank: 4, name: 'Booger landon', score: 20},
];

function LeaderboardCtrl($scope){
    $scope.fb_rankings = some_data;
}

在加载时，一切都按预期工作。但是，我希望通过代码更新模型some_data，而不是像点击等更新事件。这是因为模型的更新是通过复杂的Flash和DOM交互来实现的。使用ng-click或其他基于事件的指令不是一种选择。

因此，为了更新模型，我有change_data函数修改一个属性，然后尝试获取角度范围并使用$ apply函数（根据在线发现的一堆教程和帖子）。但是当我运行change_data()时，它会因以下错误而死亡： TypeError：对象函数（a，d）{v ... 等。

我不知道这里有什么问题。或者错误甚至意味着什么。我在这里使用上面的代码有一个jsfiddle： http://jsfiddle.net/w2Ahr/1/

任何正确方向的指针都会很棒。

Answer 1

function change_data(){
    some_data[0].rank = 99;
    var sc = angular.element("#overlay").scope();
    sc.$apply(function(){
        sc.fb_rankings = some_data;
    });

请注意，以这种方式修改范围以外的范围是完全错误的，您应该只为演示目的而这样做，并应修改controller

中的范围变量

Answer 2

调用范围。$ apply直接导致一些问题。使用包装器更安全：

// call this method to avoid '$apply already in progress'
$scope.updateScope = function (fn) {
    var phase = this.$root.$$phase;
    if (phase === '$apply' || phase === '$digest') {
        if (fn && (typeof(fn) === 'function')) {
            fn();
        }
    } else {
        this.$apply(fn);
    }
};

然后致电：

sc.updateScope(function(){
    sc.fb_rankings = some_data;
});

通知AngularJS有关更新的模型

2 个答案: