Angular(Karma) - (隔离)指令范围

时间:2014-12-09 02:11:07

标签: angularjs testing angularjs-scope jasmine karma-runner

所以,这个周末我开始有角度,我自己写了一个漂亮的旋转木马应用程序,非常有趣!

我为旋转木马写了一个简洁的指令,让任何想要安装我的旋转木马应用程序的人都能轻松使用。不幸的是,我一直在检索包含我在那里创建的函数的指令范围(我想测试它们)。

我的karma.config.js包含以下相关的代码行:

...
files: [
    // My templates
    'javascript/vendor/Directives/carousel/carousel.html',
]
...

...
preprocessors: {
    'javascript/vendor/Directives/carousel/carousel.html' : ['ng-html2js']
},
...

...
ngHtml2JsPreprocessor: {
    moduleName: 'myDirectives'
},
... 

...
// Which plugins to enable
plugins: [
  'karma-jasmine',
  'karma-chrome-launcher',
  'karma-ng-html2js-preprocessor'
],
...

在我的carouselDirective.js中,这是相关代码:

angular.module('carouselApp').directive('carousel', function() {
return {
    restrict    : 'E',
    templateUrl : 'javascript/vendor/Directives/carousel/carousel.html',
    controller  : controller,
    scope       : {
        images : '=',
        theme  : '='
    }
};

function controller ($scope, $interval) {
...
    $scope.resetInterval = function () {
        $interval.cancel(carouselInterval);

        return carouselInterval = $interval(function() {
            $scope.nextImage();
        }, 5000);
    };
...
};

最后在我的controllerSpec.js

describe("Unit: Testing carouselApp - ", function() {
    var scope = undefined,
        ctrl  = undefined;

    beforeEach(module('carouselApp'));
    beforeEach(module('myDirectives'));

    beforeEach(
        inject(function($rootScope, $controller, $injector, $compile) { //injects the dependencies
            var $carouselService = $injector.get('carouselService'),
                carouselElement  = angular.element('<carousel images="images" theme="theme"></carousel>');

            scope = $rootScope.$new();

            ctrl  = $controller('carouselController', {
                $scope : scope,
                theme  : 'fantasy',
                images : $carouselService.getFantasyImages()
            });

            $compile(carouselElement)(scope);

            scope.$digest();

            // THIS HERE IS THE PROBLEM:
            // the first parameter in the log contains the scope I created from $rootScope and the isolateScope is simply undefined.
            // How can I get the scope from the directive containing the resetInterval function?
            console.log(carouselElement.scope(), carouselElement.isolateScope());
        })
    );
});

对于那些跳过阅读代码的人来说就是这种情况。我在controllerSpec.js的评论中添加了我遇到的问题!

非常感谢任何帮助。我已经搜索了谷歌和stackoverflow ..我不是说我的问题的答案不存在,但如果它是我可能需要更多的手来了解最新情况:)

此致

一位新的角斗士!

1 个答案:

答案 0 :(得分:0)

哎呀,事实证明......我的代码很好。我的终端中的业力实例似乎已经以某种方式出现了问题。关闭终端并打开一个全新的终端解决了这个问题!

部分幸福似乎我已经掌握了这个,但那是我休息的一小部分!哈哈:)

感谢那些思考这个问题的人!