angularjs 指令单元测试失败与 controllerAs， bindToController & isolateScope()

Question

我正在尝试使用双向绑定属性(=(进行单位测试指令。该指令在我的应用程序中起作用，但是我无法获得对双向绑定进行测试的单元测试。

我一直在尝试使这个工作已经好几天了。我读了许多使用一些我想使用的功能的示例：Controlleras，bindtocontroller＆amp;reslatescope((。(忘记templateurl，我也需要。

我希望有人能告诉我如何显示分离株范围中反映的父范围的变化。

这是一个包含以下代码的plunkr：

http://plnkr.co/edit/jql9fb5ktt1cptzymwhi

这是我的测试应用：

var app = angular.module('myApp', []);
angular.module('myApp').controller('greetingController', greetingController);
greetingController.$inject = ['$scope'];
function greetingController($scope) {
  // this controller intentionally left blank (for testing purposes)
}
angular.module('myApp').directive('greetingDirective',
        function () {
            return {
                scope: {testprop: '='},
                restrict: 'E',
                template: '<div>Greetings!</div>',
                controller: 'greetingController',
                controllerAs: 'greetingController',
                bindToController: true
            };
        }
);

这是规格：

describe('greetingController', function () {
var ctrl, scope, rootScope, controller, data, template,
        compile, isolatedScope, element;
beforeEach(module('myApp'));
beforeEach(inject(function ($injector) {
    rootScope = $injector.get('$rootScope');
    scope = rootScope.$new();
    controller = $injector.get('$controller');
    compile = $injector.get('$compile');
    data = {
        testprop: 1
    };
    ctrl = controller('greetingController', {$scope: scope}, data);
    element = angular.element('<greeting-directive testprop="testprop"></greeting-directive>');
    template = compile(element)(scope);
    scope.$digest();
    isolatedScope = element.isolateScope();
}));
// PASSES
it('testprop inital value should be 1', function () {
    expect(ctrl.testprop).toBe(1);
});
// FAILS: why doesn't changing this isolateScope value 
// also change the controller value for this two-way bound property?
it('testprop changed value should be 2', function () {
    isolatedScope.testprop = 2;
    expect(ctrl.testprop).toBe(2);
}); 
});

Answer 1

您必须纠正测试指令的方式。您正在直接更改对象的isolatedScope，然后验证您已编译的DOM的ctrl对象。

基本上，您应该做的是一旦您用范围编译了DOM(这里是<greeting-directive testprop="testprop"></greeting-directive>(。这样范围将保持编译的背景。简而言之，您可以播放testprop属性值。否则element.scope()内将有同样的东西。一旦更改scope/currentScope中的任何值。您可以看到该值在指示isolatedScope中更新。我想提到的另一件事是，当您使用bindToController: true进行CC_11时，Angular会在scope中使用CONTRORTER别名添加属性，这是我们在assert

中验证了isolatedScope.greetingController.testprop

代码

describe('greetingController', function() {
  var ctrl, scope, rootScope, controller, data, template,
    compile, isolatedScope, currentScope, element;
  beforeEach(module('myApp'));
  beforeEach(inject(function($injector) {
    rootScope = $injector.get('$rootScope');
    scope = rootScope.$new();
    controller = $injector.get('$controller');
    compile = $injector.get('$compile');
    data = { testprop: 1 };
    ctrl = controller('greetingController', { $scope: scope }, data);
    element = angular.element('<greeting-directive testprop="testprop"></greeting-directive>');
    template = compile(element)(scope);
    scope.$digest();
    currentScope = element.scope();
    //OR
    //currentScope = scope; //both are same
    isolatedScope = element.isolateScope();
  }));
  // First test passes -- commented
  it('testprop changed value should be 2', function() {
    currentScope.testprop = 2; //change current element (outer) scope value
    currentScope.$digest(); //running digest cycle to make binding effects
    //assert
    expect(isolatedScope.greetingController.testprop).toBe(2);
  });
});

演示plunker