使用 Angular/Jasmine 获取指令控制器的实例答案

【问题标题】：Get instance of directive controller with Angular/Jasmine使用 Angular/Jasmine 获取指令控制器的实例
【发布时间】：2016-10-27 21:50:43
【问题描述】：

在对角度指令进行单元测试时，如何获取指令控制器的实例并在控制器上声明某些数据绑定？

function myDirective() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'tpl.html',
    scope: { },
    controller: function($scope) {
      $scope.text = 'Some text';
    }
  };
}

angular
  .module('example')
  .directive('myDirective', [
    myDirective
  ]);

单元测试

    describe('<my-directive>', function() {
      var element;
      var $compile;
      var $scope;

      beforeEach(module('example'));

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

      describe('basic functionality', function() {
        beforeEach(function() {
          element = $compile('<my-directive></my-directive')($scope);
          $scope.$digest();
        });

        it('should bind the correct text', function() {
          //?
        });
      });
    });

【问题讨论】：

这对您不起作用吗？ docs.angularjs.org/guide/unit-testing#testing-a-controller

标签： angularjs unit-testing angularjs-directive jasmine

【解决方案1】：

element = $compile('<my-directive></my-directive')($scope);
$scope.$digest();
ctrl = element.controller('myDirective');

【讨论】：

【解决方案2】：

致电element.controller 和$scope 就像element.controller($scope)。下面是一些概念证明。

angular
  .module('example', [])
  .directive('myDirective', [
    function myDirective() {
      return {
        restrict: 'E',
        replace: true,
        //template: ['<div>{{ text }}</div>'].join(''),
        scope: {},
        controller: function($scope) {
          $scope.text = 'Some text';
        }
      };
    }
  ]);

describe('<my-directive>', function() {
  var element;
  var $compile;
  var $scope;

  beforeEach(module('example'));

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

  describe('basic functionality', function() {
    beforeEach(function() {
      element = $compile('<my-directive></my-directive')($scope);
      $scope.$digest();
    });

    it('should bind the correct text', function() {
      expect(element.controller($scope).scope().$$childTail.text).toEqual('Some text')
    });
  });
});

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

【讨论】：