Модульный тест Karma Jasmine SyntaxError: Ошибка разбора при привязке угловых директив "&"

Я получил SyntaxError: Parse error в моей директиве, где я хочу использовать одностороннюю привязку "&" из метода родительской директивы

myApp.directive('datasourceDeleteBtn', [function() {
return {
    restrict: 'E',
    replace: true,
    template: '<a href="#">&#x2715</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}); который не будет передавать индексный параметр в метод.

Чтобы все заработало, вам нужно сделать пару изменений.

  1. Метод директивного элемента должен быть

    remove-parent-div="removeParentDiv(index)"
    
  2. и при вызове его из директивы, имея структуру JSON, где index это ничего, кроме параметра и datasource_index это ценность этого.

    scope.removeParentDiv({index: datasource_index});
    
  3. Выполните цикл дайджеста после вызова 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
    });
    
Другие вопросы по тегам