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

Question

首先，如果帖子太长，我深表歉意。另外，为了以防万一这会以某种方式干扰您可能给我的答案，我不会以通常的方式定义我的 Controller 。相反，我关注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" 的对象。现在，我有一组功能类似于俄罗斯套娃:

在 Controller 内部定义:

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 Event Loop 会有所帮助。 。简而言之，DOM 在事件循环迭代结束之前不会更新。直到 JavaScript 引擎用完要执行的代码之前，循环中的每次迭代都不会结束。当您将代码放入超时回调(无延迟)时，您实际上是在告诉 JavaScript 引擎在循环的下一次迭代中运行该回调(从而允许在运行回调之前更新 DOM)。