Question

我正在尝试编写一个茉莉花测试，测试我写的角度指令是否有效。

这是我的spec文件：

    describe('blurb directive', function () {
    var scope, httpMock, element, controller;

    beforeEach(module('mdotTamcCouncil'));
    beforeEach(module('mdotTamcCouncil.core'));
    beforeEach(module('blurb'));

    beforeEach(inject(function (_$httpBackend_, $rootScope, $compile) {
        element = angular.element('<mcgi-blurb text-key="mainPageIntro"></mcgi-blurb>');

        var httpResponse = '<textarea name="content" ng-model="content"></textarea>';

        scope = $rootScope.$new();
        httpMock = _$httpBackend_;

        httpMock.whenGET('components/blurb/blurb.html').respond(httpResponse);
        element = $compile(element)(scope);
        scope.$digest();
    }));

    it('should have some content', function () {
        expect(scope.content).toBeDefined();
    });
});

值＆＃34; scope.content＆＃34;总是未定义的，当我查看范围对象时，它似乎是一个通用的范围对象，它没有我的自定义属性。

以下是其他相关文件：

导语-directive.js

(function () {
    'use strict';
    angular.module('blurb')
        .directive('mcgiBlurb', blurb);

    function blurb() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: jsGlobals.componentsFolder + '/blurb/blurb.html',
            controller: 'BlurbController',
            controllerAs: 'blurb',
            bindToController: false,
            scope: {
                textKey: "@"
            }

        };

    };
})();

导语-controller.js

(function () {

    angular.module('blurb')
            .controller('BlurbController', ['$scope', 'blurbsFactory', 'userFactory', function ($scope, blurbsFactory, userFactory) {
                $scope.content = "";
                $scope.blurbs = {};
                $scope.currentUser = {};
                this.editMode = false;


                userFactory().success(function (data) {
                    $scope.currentUser = data;
                });

                blurbsFactory().success(function (data) {
                    $scope.blurbs = data;
                    $scope.content = $scope.blurbs[$scope.textKey];
                });

                this.enterEditMode = function () {
                    this.editMode = true;
                };

                this.saveEdits = function () {
                    this.editMode = false;
                    $scope.blurbs[$scope.textKey] = $scope.content;
                };
            }]);

})();

我做错了什么？

Answer 1

该指令具有隔离范围，因此传递给其控制器和链接功能（如果有）的范围是孤立的，与您的scope不同。

你可能很幸运能够使用element.isolateScope()来获取指令的范围;你可能不会，因为replace: true - 试着确定。您还可以使用element.controller('mcgiBlurb')访问控制器实例。

使用jasmine测试使用控制器的angular指令

1 个答案: