使用隔离范围测试指令时如何访问控制器范围答案

【问题标题】：how to get access to controller scope when testing directive with isolate scope使用隔离范围测试指令时如何访问控制器范围
【发布时间】：2016-09-01 13:01:25
【问题描述】：

我有隔离范围和控制器的指令，是否可以为指令编写单元测试并在控制器范围内测试一些功能？

如果正确，我如何才能访问控制器范围？

   angular.module('myApp').directive('myDirecive', function () {
        return {
            templateUrl: 'template.html',
            scope: {
                data: '='
            },

            controller: function ($scope) {
                $scope.f= function () {
                    $scope.value = true;
                };
            },

            link: function ($scope) {
              // some logic
            });
            }
        };
    })

    describe('myDirective', function () {
        'use strict';

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

        beforeEach(module('myApp'));

        beforeEach(inject(function (_$compile_, _$rootScope_) {
            $compile = _$compile_;
            $rootScope = _$rootScope_;
            $scope = $rootScope.$new();

            element = compileElement();
        }));

        function compileElement() {
            var element = angular.element('<my-directive></my-directive>');
            var compiledElement = $compile(element)($scope);

            $scope.$digest();

            return compiledElement;
        }

        it('should execute f', function () {
            $scope.f();
            expect($scope.val).toBe(true); // there we can access to isolate scope from directive;
        });
    });

【问题讨论】：

标签： angularjs unit-testing scope controller angularjs-scope

【解决方案1】：

Controller 被赋予由指令创建的隔离范围。您传递给编译函数的$scope 用作指令隔离范围的父级。

回答如何测试它，您有两个选择：

从元素访问隔离范围：

var isolated = element.isolateScope();

为此，您需要拥有$compileProvider.debugInfoEnabled(true);
从您的范围访问隔离范围：

var isolated = $scope.childHead;

【讨论】：

谢谢，对我有帮助！

【解决方案2】：

试试这个

describe('myDirective', function () {
    'use strict';

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

    beforeEach(module('myApp'));

    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();

        element = compileElement();
    }));

    function compileElement() {
        var element = angular.element('<my-directive></my-directive>');
        var compiledElement = $compile(element)($scope);
        dirCtrlScp = element.controller;
        $scope.$digest();

        return compiledElement;
    }

    it('should execute f', function () {
        dirCtrlScp.f();
        expect(dirCtrlScp.value).toBe(true); // there we can access to isolate scope from directive;
    });
});

看看这个Article

【讨论】：