茉莉花能否访问在角度指令控制器中定义的范围方法？

Question

我正在尝试对以下指令进行单元测试。 我希望能够调用指令的控制器中定义的函数（ $scope.save ），但是我的测试似乎根本无法访问该范围。

我也尝试了isolateScope() ，但是没有像我期望的那样返回内部的$ scope对象。 也许我做错了。

在下面的示例中，如何获取myDir的$ scope？ （或者，如果您愿意，可以在这个小提琴中： http : //jsfiddle.net/lalanl/8fkdsme3/ ）

  angular.module('app', []).directive([ function(myService) { return { restrict: 'E', templateUrl: 'path/to/template.html', scope: { info: "=info" }, controller: function($scope) { $scope.someVal = 'porcupine'; $scope.save = function() { /* ... */ }; } } } ]); describe('myDir', function() { var $compile, $http, $httpBackend, $scope, $rootScope, $q; var element; beforeEach(module('app')); beforeEach(function() { inject(function(_$compile_, _$http_, _$httpBackend_, _$rootScope_, _$q_) { $compile = _$compile_; $http = _$http_; $httpBackend = _$httpBackend_; $rootScope = _$rootScope_; $scope = $rootScope.$new(); $q = _$q_; }); $scope.data = "some data"; element = $compile(angular.element('<my-dir info="data"></my-dir>'), $scope); $rootScope.$digest(); $httpBackend.whenGET('path/to/template.html').respond('<div>test:{{someVal}}</div>'); }); it('should let me see its guts', function() { expect($scope.save).toBeTruthy(); expect(typeof $scope.save).toBe("function"); }); });

 <html> <head> <style type="text/css"> @charset "UTF-8"; [ng\\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) { display: none !important; } ng\\:form { display: block; } </style> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>SO question - jsFiddle demo</title> <script type="text/javascript" src="/js/lib/dummy.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type="text/javascript" src="http://jasmine.github.io/2.0/lib/jasmine.js"></script> <script type="text/javascript" src="http://jasmine.github.io/2.0/lib/jasmine-html.js"></script> <script type="text/javascript" src="http://jasmine.github.io/2.0/lib/boot.js"></script> <link rel="stylesheet" type="text/css" href="http://jasmine.github.io/2.0/lib/jasmine.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-mocks.js"></script> <style type="text/css"> </style> <script type="text/javascript"> //<![CDATA[ angular.module('app', []).directive([ function(myService) { return { restrict: 'E', templateUrl: 'path/to/template.html', scope: { info: "=info" }, controller: function($scope) { $scope.someVal = 'porcupine'; $scope.save = function() { /* ... */ }; } } } ]); describe('myDir', function() { var $compile, $http, $httpBackend, $scope, $rootScope, $q; var element; beforeEach(module('app')); beforeEach(function() { inject(function(_$compile_, _$http_, _$httpBackend_, _$rootScope_, _$q_) { $compile = _$compile_; $http = _$http_; $httpBackend = _$httpBackend_; $rootScope = _$rootScope_; $scope = $rootScope.$new(); $q = _$q_; }); $scope.data = "some data"; element = $compile(angular.element('<my-dir info="data"></my-dir>'), $scope); $httpBackend.whenGET('path/to/template.html').respond('<div>test:{{someVal}}</div>'); }); it('should let me see its guts', function() { expect($scope.save).toBeTruthy(); expect(typeof $scope.save).toBe("function"); }); }); //]]> </script> </head> <body> </body> </html>

Answer 1

这是一个更新的jsfiddle，其中的测试与内联指令模板一起使用。

编辑：设法使其与外部模板一起使用。 我忘了刷新我的http请求。 我已经更新了完整答案，您可以在这里看到更新的jsfiddle

您的测试存在一些问题：

在指令定义中，您未提供指令名称。 没有将服务myService插入指令中，但是由于未正确定义指令，因此不会出现该错误。
另外，您尝试使用之前删除的element.isolateScope（）来获取元素的范围是正确的。 这是因为该指令将创建一个新的隔离范围。
您需要执行$ httpBackEnd.flush（）刷新外部模板的待处理请求。 因为您没有这样做，所以测试中的$ compile并没有看到模板，也没有正确地编译它。

为了使它起作用，我还做了一些其他小的更改。

PS：如果您在项目中使用业力，请使用业力-ng-html2js-preprocessor通过外部模板测试指令。 在这里看看。

angular.module('app', []).directive('myDir', function () {

    return {
        restrict: 'E',
        //template: '<div>test:{{someVal}}</div>',
        templateUrl: 'path/to/template.html',
        scope: {
            info: "=info"
        },
        controller: function ($scope) {
            $scope.someVal = 'porcupine';
            $scope.save = function () { /* ... */
            };
        }
    }
});

describe('myDir', function () {

    var $compile, $scope, $rootScope;
    var element, isolatedScope;

    beforeEach(module('app'));
    beforeEach(inject(function (_$compile_, _$rootScope_, $httpBackend) {
        $httpBackend.whenGET('path/to/template.html').respond('<div>test:{{someVal}}</div>');

        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();

        element = $compile('<my-dir info="data"></my-dir>')($scope);
        $httpBackend.flush();
        isolatedScope = element.isolateScope();
    }));

    it('should let me see its guts', function () {
        expect(isolatedScope.save).toBeTruthy();
        expect(typeof isolatedScope.save).toBe("function");
    });

});

茉莉花能否访问在角度指令控制器中定义的范围方法？

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-06-11 22:36:49

茉莉花能否访问在角度指令控制器中定义的范围方法？

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-06-11 22:36:49

解决方案1
2 已采纳 2015-06-11 22:36:49