angularjs指令控制器、bindToController和；isolateScope（）

我正在尝试对具有双向绑定属性（=）的指令进行单元测试。该指令在我的应用程序中起作用，但我无法使用单元测试来测试双向绑定

几天来，我一直在努力让它工作。我已经阅读了许多示例，这些示例使用了我想要使用的一些但不是全部功能：controllerAs、bindToController和isolateScope（）。（忘记templateURL吧，我也需要它。如果我能让它工作起来，我会加上它！）

我希望有人能告诉我如何显示隔离范围中反映的父范围中的更改

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

这是我的测试应用程序：

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
            };
        }
);

var-app=angular.module（'myApp'，[]）；
角度。模块（'myApp'）。控制器（'greetingController'，greetingController）；
greetingController.$inject=['$scope']；
函数迎宾控制器（$scope）{
//此控制器故意留空（用于测试目的）
}
angular.module（'myApp'）。指令（'greetingDirective'，
函数（）{
返回{
作用域：{testprop:'='}，
限制：'E'，
模板：“问候！”，
控制器：“欢迎控制器”，
controllerAs:“欢迎控制器”，
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);
}); 
});

description（'greetingController'，函数（）{
变量ctrl、作用域、根作用域、控制器、数据、模板、，
编译、隔离范围、元素；
在每个模块之前（模块（‘myApp’）；
每次之前（注入（函数（$injector）{
rootScope=$injector.get（“$rootScope”）；
scope=rootScope.$new（）；
控制器=$injector.get（“$controller”）；
compile=$injector.get（“$compile”）；
数据={
测试项目：1
};
ctrl=controller（'greetingController'，{$scope:scope}，数据）；
元素=角度。元素（“”）；
模板=编译（元素）（范围）；
范围。$digest（）；
isolatedScope=element.isolateScope（）；
}));
//通行证
它（'testprop初始值应为1'，函数（）{
expect（ctrl.testprop）.toBe（1）；
});
//失败：为什么不更改此isolateScope值
//是否还要更改此双向绑定属性的控制器值？
它（'testprop更改的值应为2'，函数（）{
isolatedScope.testprop=2；
expect（ctrl.testprop）.toBe（2）；
}); 
});

您必须纠正测试指令的方式。您直接更改对象的

isolatedScope

，然后验证编译的

ctrl

对象

基本上，只要编译了一个具有作用域的DOM（这里是

）。因此，该范围将保存编译do的上下文。简而言之，您可以播放

testprop

属性值。或者在

元素.scope（）中也可以使用相同的内容。只要您更改
范围中的任何值
/
当前范围
。您可以在指令
isolatedScope
中看到值被更新。我还要提到的一件事是，当您使用
bindToController:true
执行
controllerAs
时，angular在
scope
内添加了控制器别名的属性，这就是我们验证的
isolatedScope.greetingController.testprop
内
assert

代码

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);
  });

});

描述（'greetingController'，函数（）{
变量ctrl、作用域、根作用域、控制器、数据、模板、，
编译，隔离范围，当前范围，元素；
在每个模块之前（模块（‘myApp’）；
每次之前（注入（函数（$injector）{
rootScope=$injector.get（“$rootScope”）；
scope=rootScope.$new（）；
控制器=$injector.get（“$controller”）；
compile=$injector.get（“$compile”）；
数据={testprop:1}；
ctrl=controller（'greetingController'，{$scope:scope}，数据）；
元素=角度。元素（“”）；
模板=编译（元素）（范围）；
范围。$digest（）；
currentScope=element.scope（）；
//或
//currentScope=scope；//两者相同
isolatedScope=element.isolateScope（）；
}));
//第一次测试通过——评论
它（'testprop更改的值应为2'，函数（）{
currentScope.testprop=2；//更改当前元素（外部）范围值
currentScope.$digest（）；//运行摘要循环以产生绑定效果
//断言
expect（isolatedScope.greetingController.testprop）.toBe（2）；
});
});

非常感谢您的好意和专业知识。这对我很有帮助。非常感谢。祝你在各个层次上都有繁荣和财富。@DanBKC嘿，谢谢你的祝福，因为多年来我一直在帮助其他人。但是你的评论这么好，谢谢；）它鼓励我做更多的贡献：）