Angularjs 在jasmine测试中调用$digest只在第一次起作用

我正试图在我的示波器上测试“手表”的行为。但问题是它只被调用一次。检查下面的小提琴。奇怪的是，我注意到，如果将变量放在控制器的$scope中，而不是控制器本身（aka$scope.name vs vm.name），它实际上可以工作

使用虚拟机（不工作）：

使用$scope（工程）：

---

您正在监视作用域上的属性，事实并非如此，因为您正在修改控制器中的属性。因此，请将手表换成：-

   $scope.$watch(function(){
       return vm.name;
    }, function (newValue, oldValue) {
        vm.counter = vm.counter + 1;
    });

//--- CODE --------------------------
(function (angular) {
    // Create module
    var myApp = angular.module('myApp', []);

    // Controller which counts changes to its "name" member
    myApp.controller('MyCtrl', ['$scope', function ($scope) {
        var vm = this;
        vm.name = 'Superhero';
        vm.counter = 0;
        $scope.$watch('vm.name', function (newValue, oldValue) {
            vm.counter = vm.counter + 1;
        });
    }]);      
})(angular);



// ---SPECS-------------------------

describe('myApp', function () {
    var scope,
    controller;
    beforeEach(function () {
        module('myApp');
    });

    describe('MyCtrl', function () {
        beforeEach(inject(function ($rootScope, $controller) {
            scope = $rootScope.$new();
            controller = $controller('MyCtrl', {
                '$scope': scope
            });
        }));
        it('sets the name', function () {
            expect(controller.name).toBe('Superhero');
        });

        it('watches the name and updates the counter', function () {
            expect(controller.counter).toBe(0);
            controller.name = 'Batman';
            scope.$digest();
            expect(controller.counter).toBe(1);
            controller.name = 'Superman';            
            scope.$digest();
            expect(controller.counter).toBe(2);
        });
    });



});

//--- CODE --------------------------
(function (angular) {
    // Create module
    var myApp = angular.module('myApp', []);

    // Controller which counts changes to its "name" member
    myApp.controller('MyCtrl', ['$scope', function ($scope) {       
        $scope.name = 'Superhero';
        $scope.counter = 0;
        $scope.$watch('name', function (newValue, oldValue) {
            $scope.counter = $scope.counter + 1;
        });
    }]);      
})(angular);



// ---SPECS-------------------------

describe('myApp', function () {
    var scope,
    controller;
    beforeEach(function () {
        module('myApp');
    });

    describe('MyCtrl', function () {
        beforeEach(inject(function ($rootScope, $controller) {
            scope = $rootScope.$new();
            controller = $controller('MyCtrl', {
                '$scope': scope
            });
        }));
        it('sets the name', function () {
            expect(scope.name).toBe('Superhero');
        });

        it('watches the name and updates the counter', function () {
            expect(scope.counter).toBe(0);
            scope.name = 'Batman';
            scope.$digest();
            expect(scope.counter).toBe(1);
            scope.name = 'Superman';            
            scope.$digest();
            expect(scope.counter).toBe(2);
        });
    });



});

另一种方法是在实例化控制器时在测试中使用

控制器作为vm

，这样控制器实例将作为名为

vm

的属性附加到作用域中

        controller = $controller('MyCtrl as vm', {
            '$scope': scope
        });

//--- CODE --------------------------
(function (angular) {
    // Create module
    var myApp = angular.module('myApp', []);

    // Controller which counts changes to its "name" member
    myApp.controller('MyCtrl', ['$scope', function ($scope) {
        var vm = this;
        vm.name = 'Superhero';
        vm.counter = 0;
        $scope.$watch('vm.name', function (newValue, oldValue) {
            vm.counter = vm.counter + 1;
        });
    }]);      
})(angular);



// ---SPECS-------------------------

describe('myApp', function () {
    var scope,
    controller;
    beforeEach(function () {
        module('myApp');
    });

    describe('MyCtrl', function () {
        beforeEach(inject(function ($rootScope, $controller) {
            scope = $rootScope.$new();
            controller = $controller('MyCtrl', {
                '$scope': scope
            });
        }));
        it('sets the name', function () {
            expect(controller.name).toBe('Superhero');
        });

        it('watches the name and updates the counter', function () {
            expect(controller.counter).toBe(0);
            controller.name = 'Batman';
            scope.$digest();
            expect(controller.counter).toBe(1);
            controller.name = 'Superman';            
            scope.$digest();
            expect(controller.counter).toBe(2);
        });
    });



});

//--- CODE --------------------------
(function (angular) {
    // Create module
    var myApp = angular.module('myApp', []);

    // Controller which counts changes to its "name" member
    myApp.controller('MyCtrl', ['$scope', function ($scope) {       
        $scope.name = 'Superhero';
        $scope.counter = 0;
        $scope.$watch('name', function (newValue, oldValue) {
            $scope.counter = $scope.counter + 1;
        });
    }]);      
})(angular);



// ---SPECS-------------------------

describe('myApp', function () {
    var scope,
    controller;
    beforeEach(function () {
        module('myApp');
    });

    describe('MyCtrl', function () {
        beforeEach(inject(function ($rootScope, $controller) {
            scope = $rootScope.$new();
            controller = $controller('MyCtrl', {
                '$scope': scope
            });
        }));
        it('sets the name', function () {
            expect(scope.name).toBe('Superhero');
        });

        it('watches the name and updates the counter', function () {
            expect(scope.counter).toBe(0);
            scope.name = 'Batman';
            scope.$digest();
            expect(scope.counter).toBe(1);
            scope.name = 'Superman';            
            scope.$digest();
            expect(scope.counter).toBe(2);
        });
    });



});