Angular.js $ watch()がサービスのJSオブジェクトメンバーからの更新をキャッチしていません

dman

$watch()return sseHandler.result.cpuResult.timestamp最初の反復後にキャッチしていません日付スタンプが変更されていることを確認したので、理由はわかりません。また、最初の反復の後、ビューを繰り返しクリックすると、スコープ変数とビューが新しい情報で更新されます...したがって、$watch動作するようになります...ただし、ビューを手動でクリックして作成した場合に限りますそれは動作します。

'厳密に使用';

angular.module('monitorApp')
.controller('homeCtrl', function($scope, $location, $document) {
    console.log("s");
});

angular.module('monitorApp')
.controller('cpuCtrl',   ['$scope', 'sseHandler', function($scope, sseHandler) {
    $scope.sseHandler = sseHandler;
    $scope.avaiable = "";
    $scope.apiTimeStamp = sseHandler.result.cpuResult.timestamp;
    $scope.infoReceived = "";
    $scope.last15 = "";
    $scope.last5 = "";
    $scope.lastMinute = "";

    var cpuUpdate = function (result) {
        $scope.available = result.cpuResult.avaiable;
        $scope.apiTimeStamp = result.cpuResult.timestamp;
        $scope.infoReceived = new Date();
        $scope.last15 = result.cpuResult.metrics['15m'].data
        $scope.last5 = result.cpuResult.metrics['5m'].data
        $scope.lastMinute = result.cpuResult.metrics['1m'].data
    }
    $scope.$watch(function () {
        console.log("being caught");
        return sseHandler.result.cpuResult.timestamp},
     function(){
            console.log("sss");
            cpuUpdate(sseHandler.result);
    });
}]);


angular.module('monitorApp')
.controller('filesystemsCtrl', function($scope, $location, $document) {
    console.log("s");
});

angular.module('monitorApp')
.controller('httpPortCtrl', function($scope, $location, $document) {
    console.log("s");
});

angular.module('monitorApp')
.factory('sseHandler', function ($timeout) {
    var source = new EventSource('/subscribe');
    var sseHandler = {};
    sseHandler.result =  { "cpuResult" : { timestamp : '1'}  };
    source.addEventListener('message', function(e) {
         result = JSON.parse(e.data);
         event = Object.keys(result)[0];
         switch(event) {
             case "cpuResult":
                 sseHandler.result = result;
                 console.log(sseHandler.result.cpuResult.timestamp);
             break;
         }
    });
    return sseHandler;
});
gkalpak

変更sseHandler.result.cpuResult.timestampはAngularコンテキストの外発生するため(非同期で実行されるイベントリスナーコールバック内)、Angularは変更について認識しません。

次のコマンドを呼び出して、$ digestループを手動でトリガーする必要があります$rootScope.$apply()

.factory('sseHandler', function ($rootScope, $timeout) {
    ...
    source.addEventListener('message', function (e) {
        $rootScope.$apply(function () {
            // Put all code in here, so Angular can also handle exceptions
            // as if they happened inside the Angular context.
            ...
        });
    }
    ...

アプリをランダムにクリックして機能させた理由は、おそらく他のアクション(モデルの変更、トリガー、ngClickイベントなど)をトリガーし、それが$ digestサイクルをトリガーしたためです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular JS 2 HTTP Post:オブジェクトはプロパティまたはメソッド 'toPromise'をサポートしていません

分類Dev

Angular js、サービスからオブジェクトを渡す

分類Dev

Angular JS:コントローラーから2番目のサービスを呼び出し、返されたオブジェクトでDOMを更新するにはどうすればよいですか?

分類Dev

Angular JS:バックエンド呼び出し後にスコープ内のオブジェクト値を更新します

分類Dev

チェックボックスのスコープはバインドされていますが、angular.js 1.6.xのドットでも更新されていません

分類Dev

あるコントローラーから別のコントローラーで使用するためにサービスに設定された値は、angular jsを使用したページの更新時に値を返しません(angularの新機能)

分類Dev

Angularサービスの公開オブジェクトリテラルが更新されていませんか?

分類Dev

Angularアプリがページの更新時にCSSとJSをロードしていませんか?

分類Dev

パラメータをAngularサービス、Node.JSバックエンドサーバーに渡すことができません

分類Dev

Angular.js:キャッチされていないオブジェクトライン36ngルーティング

分類Dev

Highstock.js / Angular.jsの範囲セレクターは、xAxis構成フィールドが存在する場合にチャートを更新しません

分類Dev

Angular JS --angular.forEach-オブジェクトのキーを取得する方法は?

分類Dev

Angular JS - オブジェクトをスコープ配列にプッシュできません

分類Dev

Angular js:含まれているページのコントローラーからhtmlに値を渡すことができません

分類Dev

必要なオブジェクト変換からのplotly.jsを含むサンキーチャート

分類Dev

Angularコントローラーがサービスオブジェクトプロパティng-repeatをバインドしていません

分類Dev

Angular js、イベントをブロードキャストし、それが完了するのを待ちます

分類Dev

Angular JSのフォームを使用してオブジェクトを配列にプッシュする方法

分類Dev

PayPalチェックアウトボタンのスタイルをAngular.jsコンポーネントとして変更しますか?

分類Dev

コンポーネントがHttpサービスメソッドを呼び出すかどうかのAngularユニットテスト:エラー:<spyOn>:スパイするオブジェクトが見つかりませんでした

分類Dev

キャッチされないエラー:SignupComponentのすべてのパラメーターを解決できません:([オブジェクトオブジェクト]、?)。SyntaxError(compiler.js:2175)で

分類Dev

Angular js 1.4.7では、オブジェクトのプロパティ/フィールド名を文字列で始める必要があるかどうか(数値は許可されていません)?

分類Dev

キーに基づいて逆に(key、value)オブジェクトのAngular.jsのOrderBy

分類Dev

angle-ui-routerを使用して、angular.jsのサブモジュールからメインモジュールにサブステートを渡します

分類Dev

私のangular.jsコードをチェックしてください、それは機能していません

分類Dev

Angular 'タイプ'オブジェクト 'の異なるサポートオブジェクト' [オブジェクトオブジェクト] 'が見つかりません。NgForは、配列などのIterableへのバインドのみをサポートしています。

分類Dev

JavascriptオブジェクトをIDで比較して、Angular / JSで一意のリストを作成します

分類Dev

ジャスミンテストサービスangular-getBaseUrl()をスパイするオブジェクトが見つかりませんでした

分類Dev

Angular JS MVC WebAPIモデル/パラメーターが.NETCoreをバインドしていません

Related 関連記事

  1. 1

    Angular JS 2 HTTP Post:オブジェクトはプロパティまたはメソッド 'toPromise'をサポートしていません

  2. 2

    Angular js、サービスからオブジェクトを渡す

  3. 3

    Angular JS:コントローラーから2番目のサービスを呼び出し、返されたオブジェクトでDOMを更新するにはどうすればよいですか?

  4. 4

    Angular JS:バックエンド呼び出し後にスコープ内のオブジェクト値を更新します

  5. 5

    チェックボックスのスコープはバインドされていますが、angular.js 1.6.xのドットでも更新されていません

  6. 6

    あるコントローラーから別のコントローラーで使用するためにサービスに設定された値は、angular jsを使用したページの更新時に値を返しません(angularの新機能)

  7. 7

    Angularサービスの公開オブジェクトリテラルが更新されていませんか?

  8. 8

    Angularアプリがページの更新時にCSSとJSをロードしていませんか?

  9. 9

    パラメータをAngularサービス、Node.JSバックエンドサーバーに渡すことができません

  10. 10

    Angular.js:キャッチされていないオブジェクトライン36ngルーティング

  11. 11

    Highstock.js / Angular.jsの範囲セレクターは、xAxis構成フィールドが存在する場合にチャートを更新しません

  12. 12

    Angular JS --angular.forEach-オブジェクトのキーを取得する方法は?

  13. 13

    Angular JS - オブジェクトをスコープ配列にプッシュできません

  14. 14

    Angular js:含まれているページのコントローラーからhtmlに値を渡すことができません

  15. 15

    必要なオブジェクト変換からのplotly.jsを含むサンキーチャート

  16. 16

    Angularコントローラーがサービスオブジェクトプロパティng-repeatをバインドしていません

  17. 17

    Angular js、イベントをブロードキャストし、それが完了するのを待ちます

  18. 18

    Angular JSのフォームを使用してオブジェクトを配列にプッシュする方法

  19. 19

    PayPalチェックアウトボタンのスタイルをAngular.jsコンポーネントとして変更しますか?

  20. 20

    コンポーネントがHttpサービスメソッドを呼び出すかどうかのAngularユニットテスト:エラー:<spyOn>:スパイするオブジェクトが見つかりませんでした

  21. 21

    キャッチされないエラー:SignupComponentのすべてのパラメーターを解決できません:([オブジェクトオブジェクト]、?)。SyntaxError(compiler.js:2175)で

  22. 22

    Angular js 1.4.7では、オブジェクトのプロパティ/フィールド名を文字列で始める必要があるかどうか(数値は許可されていません)?

  23. 23

    キーに基づいて逆に(key、value)オブジェクトのAngular.jsのOrderBy

  24. 24

    angle-ui-routerを使用して、angular.jsのサブモジュールからメインモジュールにサブステートを渡します

  25. 25

    私のangular.jsコードをチェックしてください、それは機能していません

  26. 26

    Angular 'タイプ'オブジェクト 'の異なるサポートオブジェクト' [オブジェクトオブジェクト] 'が見つかりません。NgForは、配列などのIterableへのバインドのみをサポートしています。

  27. 27

    JavascriptオブジェクトをIDで比較して、Angular / JSで一意のリストを作成します

  28. 28

    ジャスミンテストサービスangular-getBaseUrl()をスパイするオブジェクトが見つかりませんでした

  29. 29

    Angular JS MVC WebAPIモデル/パラメーターが.NETCoreをバインドしていません

ホットタグ

アーカイブ