从$scope ()内部刷新$scope.function

Question

首先，如果邮件太长，我很抱歉。另外，万一这会干扰你可能给我的答案，我不会用通常的方式来定义我的控制器。相反，我遵循http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html，并做：

var game_1 = function($scope){
  var _this = this;
  //some code
  $scope.someFunction = function() {
    _this.someFunction() ;
  } ;
} ;
game1.prototype.someFunction = function() {
  //some code
} ;
game_1.$inject = ['$scope'] ;
app.controller('game_1', game_1) ;

在我的HTML中，我有一个带有属性ng-show="checkRare"的对象。现在，我有一套功能，它们的工作方式类似于matryoshka娃娃：

在控制器内部定义：

this.promptElement = function(message) {
    var input = prompt(message) ;
    if ( input === null ) {
        this.resetCell(this.cellIJ) ;
        return false ;
    } else if ( input === '' ) {
        this.resetCell(this.cellIJ) ;
        return '' ;
    } else {
        return input.toUpperCase() ;
    }
} ;
//some more code
$scope.function1 = function(i,j,F) {
    _this.function1(i,j,F) ;
} ;
$scope.function2A = function(j) {
    _this.function2A(j) ;
} ;
$scope.function2B = function(i,F) {
    _this.function2B(i,F) ;
} ;
$scope.function3A = function() {
    _this.function3A() ;
} ;
$scope.function3B = function() {
    _this.function3B() ;
} ;
$scope.function4 = function() {
    $scope.checkRare = true ; //THE PROBLEM LIES HERE
    _this.function4() ;
} ;

在外面，我有：

game_1.prototype.function1 = function(i,j,F) {
    //some code 
    this.inputElement = this.promptElement('Enter element name') ;
    //some more code
} ;
game_1.prototype.function2A = function(j) {
    //some code
    for ( var i = 1 ; i < 8 ; i++ ) {
        this.function1(i,j) ;
        if ( this.inputElement === false ) { return ; }
    }
} ;
game_1.prototype.function2B = function(i,F) {
    //some code
    for ( var j = j0 ; j < jF ; j++ ) {
        this.function1(i,j,F) ;
        if ( this.inputElement === false ) { return ; }
    }
} ;
game_1.prototype.function3A = function() {
    //some code
    for ( var j = 1 ; j < 19 ; j ++ ) {
        this.function2A(j) ;
        if ( this.inputElement === false ) { return ; }
    }
} ;
game_1.prototype.function3B = function() {
    //some code
    for ( var i = 6 ; i < 8 ; i++ ) {
        this.function2B(i,true) ;
        if ( this.inputElement === false ) { return ; }
    }
} ;
game_1.prototype.function4 = function() {
    //some code
    this.function3A() ;
    if ( this.inputElement === false ) { return ; }
    this.function3B() ;
} ;

但是，正如有人在我提出的另一个问题中所建议的那样，在整个函数完成之前，$scope不会刷新，所以直到最后我才能看到$scope.checkRare = true的效果。为了让它成为第一件事，我尝试使用$scope.$apply，但是我得到了错误$apply already in progress (顺便说一句，我有时也会随机得到)。我也尝试过使用$timeout和“safeApply”方法(https://coderwall.com/p/ngisma/safe-apply-in-angular-js)，但这两种方法都不起作用。

那么，在函数的其余部分运行之前，如何查看$scope.checkRare = true的结果，有什么想法吗？还有，作为次要的问题，有人能告诉我为什么我有时会得到$apply already in progress，即使我没有明确地使用$scope.$apply

提前感谢！再一次，很抱歉这么长的帖子！:)

Answer 1

我可能不完全理解你的问题，但我认为你想要的是这样的：

...
$scope.doSomething = function(){
  $scope.checkRare = true;
  $timeout(function(){
    // check for results of setting $scope.checkRare
  });
}
...

要理解这一工作原理，了解JavaScript事件循环是很有帮助的。简而言之，DOM直到事件循环迭代结束才会被更新。循环中的每一次迭代直到JavaScript引擎用完要执行的代码后才能结束。当您将代码放入超时回调(没有延迟)中时，实际上是告诉JavaScript引擎在循环的下一次迭代中运行该回调(从而允许在回调运行之前更新DOM )。