コントローラで更新された値に基づいて更新されないビュー

Question

式がregexと一致する場合、self.displayの値をtrueに変更します。私はこのロジックを$scope.$apply()ブロックに書いていますが、ifブロックがトリガーされたときにDigest already in progressエラーが発生します。

パーシャルビューテンプレート -

<form ng-controller="termsCtrl as terms"> 
    <div ng-show="terms.display"> 
     <input type="checkbox"> 
     <label> Accept </label> 
    </div> 
</form> 

コントローラ - 上記のコードは動作します

if (self.regex.test(self.current)) { 
    $scope.$apply(function() { 
     self.display = true; 
    }); 
} else { 
    self.display = false; 
} 

。 self.displayが真の場合form内にdivが正しく表示されますが、エラーは$digest already in progressになります。

私はこれまで、

1）

$scope.$watch('self.display', function() { 
    console.debug(self.display); 
}) 

2）

if(!$scope.$$phase) { 
    $scope.$apply(); 
} 

3）

$timeout(function(){ 
    self.display = true; 
}); 

上記技術は生成しない以下試みましたどんなエラーでも、内のは決して表示されません。

Answer 1

角度コントローラーの範囲外で実行しているときは、$ scope。$ apply（）を使用する必要があります。たとえば、コールバックをトリガするためにJQueryイベントまたはプレーンなJavaScriptイベントを使用していた場合、そのコールバック内で$ apply（）を使用します。

すべてのコードを見ることなく、問題が何であるかを言うのは難しいですが、私の最初の考えは、あなたが使用している場合は、「self.display」

Answer 2

の代わりに$のscope.displayを使用しなければならないということです指令の場合は、bindToControllerオプションを使用する必要があります。これにより、角度がコントローラインスタンスの値を監視します。そうでなければ、あなたは手動で時計を設定する必要があり、単純にコントローラを使用して、ちょうどcontrollerAs構文を使用したい場合：

はJavaScript

angular.module("app", []) 
.controller('termsCtrl', function ($scope) { 
    this.display = true; 

    $scope.$watch(angular.bind(this, function() { 
    return this.display; 
    }), function (newVal, oldVal) { 
    // now we will pickup changes to newVal and oldVal 
    if (newVal !== oldVal) { 
     console.log(newVal, oldVal); 
    } 
    }); 
});