2017-09-13 16 views
0

AngularJSへの移行が遅いjQueryプロジェクトがあります。実際には、AngularJSコンポーネントを1つずつ導入して、イベント・バスとして$ rootScopeを使用してjQueryハンドラに結びつけようとしています。

これは私がjQueryのからイベントを送出する方法である:

var el = $('[ng-app="cpmsApp"]')[0]; 
var rootScope = angular.element(el).scope().$root; 
rootScope.$emit('someevent', {'value': 'TR'}); 

、これは私は、コントローラ内部でそれらをキャッチする方法である:

$rootScope.$on('someevent', function(event, passed_obj) { 
    console.log('received event'); 
    console.log(passed_obj); 
    $scope.$apply(function() { 
     $scope.countryfilter = passed_obj.value; 
    }); 
}); 

これは角外からのイベントをキャッチしながら、正常に動作しますが、私はその中からイベントを出そうとします。エラーが発生します:

Error: [$rootScope:inprog] http://errors.angularjs.org/1.6.4/$rootScope/inprog?p0=%24apply 

docsは、明示的な$applyが不要であることを意味します。

私の質問は、イベントを見て、$applyを使用するかどうかを確認する方法です。線に沿って何か:

if(event.from_within_angular) { 
    $scope.countryfilter = passed_obj.value; 
} else { 
    $scope.$apply(function() { 
     $scope.countryfilter = passed_obj.value; 
    }); 
} 

答えて

0

をトリガーされるたびに更新されます$scope.$applyを削除し、これは推奨され、$compileProvider.debugInfoEnabled(false);では動作しませんので、私は var rootScope = angular.element(el).scope().$root;をやってお勧めしませんto run AngularJS in productionを設定します。

window.rootScopeUtils = {}; 
angular.module('cpmsApp').run(['$rootScope', '$timeout', '$window', function ($rootScope, $timeout, $window) { 
    $window.rootScopeUtils.$broadcast = function (event, args) { 
     $timeout(function() { //or $rootScope.$applyAsync(function() {}); 
      $rootScope.$broadcast(event, args); 
     }); 
    }; 
}]); 

そして、あなたのjQueryの呼び出しでwindow.rootScopeUtils.$broadcast('someevent', {'value': 'TR'})のように、この機能を使用する:あなたはあなたの放送が/のようなmodule run blockを使用して、グローバル機能を発する定義することができます回避策として

$broadcast$timeoutでラップされているので、これは$digestを保証します。

0

countryfilterはイベントが

$rootScope.$on('someevent', function(event, passed_obj) { 
    console.log('received event'); 
    console.log(passed_obj); 
    $scope.countryfilter = passed_obj.value; 
}); 
関連する問題