Skip to content

Unit Test Karma Jasmine SyntaxError: Parse error on "&" Angular Directive binding #15

@ericjames

Description

@ericjames

I get SyntaxError: Parse error at my directive line where I want to use a "&" one-way binding from a parent directive's method

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>

The parent div of the ng-repeat that passes removeParentDiv

// parentDiv directive has this
        scope.datasources = [];
        scope.removeDatasourcePicker = function(index) {
            scope.datasources.splice(index, 1);  // ie take it out
        };

It seems the problem is that Jasmine does not like the { }. Removing the brackets results in the test going through (with typical errors since & requires {}).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions