我有如下指令:
angular.module('buttonModule', []).directive('saveButton', [
function () {
function resetButton(element) {
element.removeClass('btn-primary');
}
return {
restrict: 'E',
replace: 'false',
scope: {
isSave: '='
},
template:
'<button class="btn" href="#" style="margin-right:10px;" ng-disabled="!isSave">' +
'</button>',
link: function (scope, element) {
console.log(scope.isSave);
scope.$watch('isSave', function () {
if (scope.isSave) {
resetButton(scope, element);
}
});
}
};
}
]);
Jasmine 测试如下:
describe('Directives: saveButton', function() {
var scope, compile;
beforeEach(module('buttonModule'));
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
compile = $compile;
}));
function createDirective() {
var elem, compiledElem;
elem = angular.element('<save-button></save-button>');
compiledElem = compile(elem)(scope);
scope.$digest();
return compiledElem;
}
it('should set button clean', function() {
var el = createDirective();
el.scope().isSaving = true;
expect(el.hasClass('btn-primary')).toBeFalsy();
});
});
问题是 isSaving 的值没有反射(reflect)在指令中,因此永远不会调用 resetButton 函数。我如何访问规范中的指令范围并更改变量值。我尝试使用 isolateScope,但同样的问题仍然存在。
最佳答案
首先请注意,您在调用 resetButton
函数时使用了两个参数,而它只接受一个参数。我在我的示例代码中修复了这个问题。我还在按钮元素中添加了 btn-primary
类,使测试的通过更加清晰。
您的指令在外部范围和隔离范围之间设置双向数据绑定(bind):
scope: {
isDirty: '=',
isSaving: '='
}
您应该利用它来修改 isSaving
变量。
将 is-saving
属性添加到您的元素:
elem = '<save-button is-saving="isSaving"></save-button>';
然后修改编译时使用的scope的isSaving
属性(还需要触发digest循环让watcher检测到变化):
var el = createDirective();
scope.isSaving = true;
scope.$apply();
expect(el.hasClass('btn-primary')).toBeFalsy();
演示: http://plnkr.co/edit/Fr08guUMIxTLYTY0wTW3?p=preview
如果您不想将 is-saving
属性添加到您的元素并且仍然想修改您需要检索隔离范围的变量:
var el = createDirective();
var isolatedScope = el.isolateScope();
isolatedScope.isSaving = true;
isolatedScope.$apply();
expect(el.hasClass('btn-primary')).toBeFalsy();
然而,要使其正常工作,您需要删除与 isSaving
的双向绑定(bind):
scope: {
isDirty: '='
}
否则它会尝试绑定(bind)到不存在的东西,因为元素上没有 is-saving
属性,您会收到以下错误:
Expression 'undefined' used with directive 'saveButton' is non-assignable! (https://docs.angularjs.org/error/$compile/nonassign?p0=undefined&p1=saveButton)
关于angularjs - Jasmine 测试中无法访问指令范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23942532/