Javascript 测试角度指令中的链接函数不'；行不通

我对使用jasmine和karma进行单元测试还很陌生。我试图测试指令中链接中的函数。它在我试图获取的点击事件中被调用。请注意，我使用jQuery for jasmine，html模板来自my.templates模块。它选择正确的元素并单击它，但它不启动scope.callback函数，而且它从未被调用

指令.js

(function() {
    'use strict';

    angular
        .module('MyModule')
        .directive('dropdownFilter', function() {
            return {
                restrict: 'E',
                require: '^ngModel',
                scope: {
                    ngModel: '=', // selection
                    items: '=',   // items to select from
                    callback: '&' // callback
                },
                link: function(scope, element, attrs) {
                    element.on('click', function(event) {
                        event.preventDefault();
                    });

                    scope.default = 'Select';
                    scope.isButton = 'isButton' in attrs;

                    // selection changed handler
                    scope.select = function(item) {
                        scope.ngModel = item;
                        if (scope.callback) {
                            scope.callback({ item: item });
                        }
                    };
                },
                templateUrl: 'app/dropdown/dropdown.html'
            };
        });
})();

Dropdown.html

<div class="btn-group" uib-dropdown>
    <button ng-if="isButton"
            type="button"
            class="btn btn-primary"
            ng-bind="ngModel.label || default">
    </button>
    <button ng-if="isButton"
            type="button"
            class="btn btn-primary dropdown-toggle"
            uib-dropdown-toggle>
        <span class="caret"></span>
    </button>

    <a ng-if="!isButton"
       class="dropdown-toggle"
       uib-dropdown-toggle href
       ng-bind="ngModel.label || default">
    </a>
    <span ng-if="!isButton" class="caret"></span>

    <ul class="dropdown-menu" role="menu">
        <li ng-repeat="item in items">
            <a href="#"
               ng-bind="item.label"
               ng-click="select(item)">
            </a>
        </li>
    </ul>
</div>

测验

description（'documents dropdown directive'，function（）{
var-scope，$rootScope；
beforeach（angular.mock.module（'MyModule'））；
beforeach（angular.mock.module（'my.templates'）；
beforeach（注入（函数（$rootScope，$compile）{
scope=$rootScope.$new（）；
scope.myItem={}；
scope.items=[
{id:2，标签：'132'}，
{id:3，标签：'131'}，
{id:4，标签：'123'}
];
compile=$compile；
}));
它（'应该呈现简单指令'，函数（）{
var元素=compile（“”）（范围）；
范围。$digest（）；
expect（element.html（））.toBeDefined（）；
});
它（'应该在其存在时调用回调函数'，函数（）{
scope.callback=函数（）{}；
var元素=compile（“”）（范围）；
范围。$digest（）；
spyOn（范围“回调”）；
var button=$j（element.find（'ul'）.find（'a'）.first（）；
按钮。单击（）；
范围。$digest（）；
expect（scope.callback）.toHaveBeenCalled（）；
});
});

describe('documents dropdown directive', function () {
    var scope, $rootScope;

    beforeEach(angular.mock.module('MyModule'));
    beforeEach(angular.mock.module('my.templates'));

    beforeEach(inject(function ($rootScope, $compile) {
        scope = $rootScope.$new();
        scope.myItem = {};
        scope.items = [
            {id: 2, label: '132'},
            {id: 3, label: '131'},
            {id: 4, label: '123'}
        ];
        compile = $compile;
    }));

    it('should render simple directive', function() {
        var element = compile("<dropdown-filter ng-model='myItem' items='items'></dropdown-filter>")(scope);
        scope.$digest();

        expect(element.html()).toBeDefined();
    });

    it('should call callback function when its there', function() {
        scope.callback = function(){};
        var element = compile("<dropdown-filter ng-model='myItem' items='items'></dropdown-filter>")(scope);
        scope.$digest();

        spyOn(scope, 'callback');

        var button = $j(element).find('ul').find('a').first();
        button.click();

        scope.$digest();
        expect(scope.callback).toHaveBeenCalled();
    });
});