Модульный тест Karma Jasmine SyntaxError: Ошибка разбора при привязке угловых директив "&"
Я получил SyntaxError: Parse error
в моей директиве, где я хочу использовать одностороннюю привязку "&" из метода родительской директивы
myApp.directive('datasourceDeleteBtn', [function() {
return {
restrict: 'E',
replace: true,
template: '<a href="#">✕</a>',
scope: {
datasourceIndex: '@',
removeParentDiv: '&'
},
link: link
};
function link(scope, element, attr) {
element.bind('click', function(event) {
event.preventDefault();
scope.deleteDatasource(scope.datasourceIndex);
});
// Notify parent directive
scope.deleteDatasource = function(datasource_index) {
// conditional stuff that happens not included
// {} required for passing values to "&" parent scope method
scope.removeParentDiv({datasource_index});
};
}
}]);
HTML
<parent-div ng-repeat> // this is just a mockup not literal
<datasource-delete-btn datasource-index="{{$index}}" remove-parent-div="removeParentDiv()"></datasource-delete-btn>
</parent-div>
Родительский div ng-repeat, который передает removeParentDiv
// parentDiv directive has this
scope.datasources = [];
scope.removeDatasourcePicker = function(index) {
scope.datasources.splice(index, 1); // ie take it out
};
Кажется, проблема в том, что Жасмин не нравится { }. Снятие скобок приводит к прохождению теста (с типичными ошибками, поскольку & требует {}).
1 ответ
Вы получаете ошибку, потому что вы передаете JSON в неправильном формате в методе
Вы не вызвали метод, переданный в области действия директивы removeParentDiv: '&'
правильно из директивы. Как вы только делаете scope.removeParentDiv({datasource_index});
который не будет передавать индексный параметр в метод.
Чтобы все заработало, вам нужно сделать пару изменений.
Метод директивного элемента должен быть
remove-parent-div="removeParentDiv(index)"
и при вызове его из директивы, имея структуру JSON, где
index
это ничего, кроме параметра иdatasource_index
это ценность этого.scope.removeParentDiv({index: datasource_index});
Выполните цикл дайджеста после вызова
scope.deleteDatasource(scope.datasourceIndex);
метод изclick
событие, чтобы оно обновилоscope
связывание.element.bind('click', function(event) { event.preventDefault(); scope.deleteDatasource(scope.datasourceIndex); scope.$apply(); //to run digest cycle, to keep binding in sync });