BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] angularで複数の変数の変化を$watchする方法 [重複].

2023-05-10 14:46:36

質問

方法 $scope.$watch Angularで複数の変数を使用し、そのうちの1つが変更されたときにコールバックをトリガーする方法。 

$scope.name = ...
$scope.age = ...
$scope.$watch('???',function(){
    //called when name or age changed
})

どのように解決するのですか？

アップデイト

Angularは現在、2つのスコープメソッドを提供しています。 $watchGroup (1.3 以降) と ウォッチコレクション . これらは @blazemonger と @kargold によって言及されています。

これは型や値とは無関係に動作するはずです。 

$scope.$watch('[age,name]', function () { ... }, true);

この場合、第3パラメータをtrueに設定する必要があります。

文字列の連結である 'age + name' はこのような場合、失敗します。 

<button ng-init="age=42;name='foo'" ng-click="age=4;name='2foo'">click</button>

ユーザーがボタンをクリックする前に、ウォッチされている値は次のようになります。 42foo ( 42 + foo ) とクリックした後に 42foo ( 4 + 2foo ). というわけで、ウォッチ関数は呼ばれない。そのため、このようなケースが発生しないことを保証できない場合は、配列式を使用した方がよいでしょう。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet" />
        <script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
        <script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
        <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
        <script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
        <script>

angular.module('demo', []).controller('MainCtrl', function ($scope) {

    $scope.firstWatchFunctionCounter = 0;
    $scope.secondWatchFunctionCounter = 0;

    $scope.$watch('[age, name]', function () { $scope.firstWatchFunctionCounter++; }, true);
    $scope.$watch('age + name', function () { $scope.secondWatchFunctionCounter++; });
});

describe('Demo module', function () {
    beforeEach(module('demo'));
    describe('MainCtrl', function () {
        it('watch function should increment a counter', inject(function ($controller, $rootScope) {
            var scope = $rootScope.$new();
            scope.age = 42;
            scope.name = 'foo';
            var ctrl = $controller('MainCtrl', { '$scope': scope });
            scope.$digest();

            expect(scope.firstWatchFunctionCounter).toBe(1);
            expect(scope.secondWatchFunctionCounter).toBe(1);

            scope.age = 4;
            scope.name = '2foo';
            scope.$digest();

            expect(scope.firstWatchFunctionCounter).toBe(2);
            expect(scope.secondWatchFunctionCounter).toBe(2); // This will fail!
        }));
    });
});


(function () {
    var jasmineEnv = jasmine.getEnv();
    var htmlReporter = new jasmine.HtmlReporter();
    jasmineEnv.addReporter(htmlReporter);
    jasmineEnv.specFilter = function (spec) {
        return htmlReporter.specFilter(spec);
    };
    var currentWindowOnload = window.onload;
    window.onload = function() {
        if (currentWindowOnload) {
            currentWindowOnload();
        }
        execJasmine();
    };
    function execJasmine() {
        jasmineEnv.execute();
    }
})();

        </script>
    </head>
    <body></body>
</html>

http://plnkr.co/edit/2DwCOftQTltWFbEDiDlA?p=preview

PS:

コメントで@reblaceさんが述べているように、もちろん値にアクセスすることは可能です。 

$scope.$watch('[age,name]', function (newValue, oldValue) {
    var newAge  = newValue[0];
    var newName = newValue[1];
    var oldAge  = oldValue[0];
    var oldName = oldValue[1];
}, true);

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します