我的测试中没有触发$ watch

Question

我在网上看过很多次这个问题，但我无法弄清楚我的情况有什么问题。

这是我的指示

angular.module('myApp')
.directive('gsSpinner', function () {
    return {
        template: '<span><span ng-transclude></span><div class="gs-loader"><i class="fa fa-spinner fa-pulse"></i></div></span>',
        restrict: 'EAC',
        transclude:true,
        replace: false,

        link: function(scope,element,attrs){
            if ( element.is('.large')){
                element.find('.gs-loader').addClass('large');
            }

            if ( element.is('.inline') ){
                element.find('.gs-loader').addClass('inline');
            }

            scope.$watch(function(){ return attrs.gsSpinner; }, function(){
                console.log('spinner attr changed', attrs.gsSpinner);
                if ( !attrs || !attrs.gsSpinner || attrs.gsSpinner.length === 0 ){ // empty
                    return;
                }

                if ( attrs.gsSpinner === 'true' ){
                    element.addClass('gs-spinner-active');
                }else{ // 'false'
                    element.removeClass('gs-spinner-active');
                }
            });
        }
    };
});

这是我的代码。正如你所看到的，我尝试了所有可能的摘要和超时。

我希望看到打印spinner attr changed，即使我的期望不正确但看不到它。

describe('Directive: gsSpinner', function () {

// load the directive's module
beforeEach(module('myApp', 'backend-mock', 'templates-main'));

var element,
    scope;

beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();
    scope.active = 'foo';
    element = angular.element('<div gs-spinner="hello" class="inline large"></div>');
    element = $compile(element)(scope);
    scope.$digest();
}));


describe('classes', function(){
    it('should take class large and inline from parent and put it on gs-loader', function(){
        var $gsLoader = element.find('.gs-loader');
        expect($gsLoader.is('.large')).toBe(true);
        expect($gsLoader.is('.inline')).toBe(true);
    });
});

describe('active', function(){
    it('should add gs-spinner-active on element', inject(function( $timeout, $rootScope ){
        expect(element.is('.gs-spinner-active')).toBe(false);
        angular.element('body').append(element);
        scope.active = true;
        element.scope().active = true;
        element.scope().$apply();
        scope.$digest();
        scope.$apply();
        element.scope().$digest();
        element.scope().$apply();
        element.children().scope().$apply();
        element.children().scope().$digest();
        $rootScope.$digest();

        waitsFor(function(){
            try{
                $timeout.flush();
            }catch(e){}
            return element.is('.gs-spinner-active')
        });
        expect(element.is('.gs-spinner-active')).toBe(true);
    }));
})

有人可以帮忙吗？