Javascript Angularjs指令测试中未定义范围和编译

我正在尝试为此指令创建一些测试。第一种情况是，带有alpha字符的keydown事件不应更改元素的值。这是指令

// PhoneInput directive for formatting phone input.
angular.module('app')
    .directive('phoneInput', function ($filter, $browser) {
        return {
            require: 'ngModel',
            link: function ($scope, $element, $attrs, ngModelCtrl) {
                var listener = function () {
                    var value = $element.val().replace(/[^0-9]/g, '');
                    $element.val($filter('tel')(value, false));
                };

                // This runs when we update the text field
                ngModelCtrl.$parsers.push(function (viewValue) {
                    return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
                });

                // This runs when the model gets updated on the scope directly and keeps our view in sync
                ngModelCtrl.$render = function () {
                    $element.val($filter('tel')(ngModelCtrl.$viewValue, false));
                };

                $element.bind('change', listener);
                $element.bind('keydown', function (event) {
                    var key = event.keyCode;
                    // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
                    // This lets us support copy and paste too
                    if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
                        return;
                    }
                    $browser.defer(listener); // Have to do this or changes don't get picked up properly
                });

                $element.bind('paste cut', function () {
                    $browser.defer(listener);
                });
            }

        };
});

---

问题是测试打印出的错误是范围和编译都未定义。您可以看到scope和compile都有一个console.log，在测试时它们都没有定义。

在您链接的示例中，它们将$injector传入各自的

（inject（函数（[…]）

并执行

scope=$injector.get（'$rootScope'）.$new（）；

，但您只是执行

scope=rootScope.$new（）；

。在这方面，您是否尝试过完全按照示例进行操作？是否应该在缺少rootScope之前使用“scope=rootScope.$new（）；”be“scope=$rootScope.$new（）；”？$。此外，模板是否缺少开始标记（@Spitfire point很好，但是在我尝试它时，它并不能解决问题。你能创建一个小提琴让我们看看发生了什么吗？@sphanley我已经尝试了两种方法。这没有什么区别。我假设它们基本上做了相同的事情。在你链接的示例中，它们在每次（inject）之前将$injector传递到它们的

（函数（[…]）

和执行

scope=$injector.get（“$rootScope”）。$new（）；

，但您只是在执行

scope=rootScope.$new（）；

。您是否在这方面尝试过完全按照示例进行操作？这个“scope=rootScope.$new（）；“be”scope=$rootScope.$new（）；“？$在rootScope丢失之前。另外，模板是否缺少开始标记（@Spitfire good point，但是在我尝试它时它并不能解决问题。你能创建一个小提琴让我们看看发生了什么吗？@sphanley我已经尝试了两种方法。这没有什么区别。我假设它们基本上做了相同的事情。

describe('phoneInput directive', function() {
    beforeEach(module('app'));

   // Define global references for injection
    var scope, compile, document, element, template;
    element = null;

    // making an input element that calls phoneInput
    template = 'input required name="tel" ng-model="tel" type="text" phone-input >';


    beforeEach(inject(function($compile, $rootScope, $document) {
        compile = $compile;
        scope = $rootScope.$new();
        document = $document;
    }));

    beforeEach(function(){
        element = compile(template)(scope);
        // spyOn keyDown
        spyon(scope, 'keydown');
    });

    it('should not accept alpha characters', function(){
        console.log(scope);
        console.log(compile);
       var givenEvent = {keyCode: 65};
       scope.$digest();

       element.triggerHandler('keydown', givenEvent);

       expect(element.val()).toEqual('');
    });
});