Question

这是我的指示：

angular.module('app')
    .directive('statusFilter',statusFilter);

function statusFilter() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/directives/status-filter.html',
        scope: {
            flags: '='
        },
        controller: function($scope, $element, $timeout, $document) {

            function isChildElement(el) {
                return $.contains($element[0], el);
            }

            function close(event) {
                if (!isChildElement(event.target)) {
                    $scope.$apply(function() {
                        $scope.isOpen = false;
                    });
                    $document.off('mouseup', close);
                }
            }

            function updateFlags(value) {
                for (var prop in $scope.flagsClone) {
                    $scope.flagsClone[prop] = value;
                }
            }

            function pullFlags() {
                $scope.flagsClone = $.extend(true, {}, $scope.flags);
            }

            function pushFlags() {
                for (var prop in $scope.flagsClone) {
                    $scope.flags[prop] = $scope.flagsClone[prop];
                }
            }

            $scope.isOpen = false;
            $scope.flagsClone = {};

            pullFlags();

            $scope.apply = function() {
                pushFlags();
                $scope.isOpen = false;
            };

            $scope.selectAll = function() {
                updateFlags(true);
            };

            $scope.selectNone = function() {
                updateFlags(false);
            };

            $scope.open = function() {
                if (!$scope.isOpen) {
                    pullFlags();
                    $scope.isOpen = true;

                    $timeout(function() {
                        $document.on('mouseup', close);
                    });
                }
            };
        }

    };

}

这是我为它写的一个简单的测试：

describe('status-filter directive', function() {
    beforeEach(module('app'));

    var template = '<status-filter flags="filters"></status-filter>';
    var scope, element;


    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope.$new();
        var ngElement = angular.element(template);
        element = $compile(ngElement)(scope);
        scope.$digest();
    }));

    it('Should open when isOpen is true', function() {
        scope.open();
        scope.$digest();

        expect(scope.isOpen).toBe(true);


    });
});

无论我如何尝试，我都无法访问指令的范围。与上面的示例类似，.isolateScope（），element.scope（）。有任何我尝试我得到open() is undefined错误。我的代码出了什么问题？

Answer 1

我无法访问范围的原因是我没有创建过滤器变量。所以这将有效：

describe('status-filter directive', function() {
    beforeEach(module('app'));

    var template = '<status-filter flags="filters"></status-filter>';
    var scope, element;


    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope.$new();
        scope.filters = {
             filter1:true;
        }

        var ngElement = angular.element(template);
        element = $compile(ngElement)(scope);
        scope.$digest();
    }));

    it('Should open when isOpen is true', function() {
        scope.open();
        scope.$digest();

        expect(scope.isOpen).toBe(true);


    });
});

为什么我不能在茉莉花测试中访问指令的范围？

1 个答案: