angularJS directive for href behavior

Question

I am trying to get a href behavior added to tag. How can this be done? Is there way in angular directives to add same behavior to other html tags.

I have added

  <div click-element="#/page1/test?Tab=1/">

but i get the following lexer error for passing the URL as parameter:

 "stack": "Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 0-0 [#] in expression [#/page1/test?Tab=1/].

How can i pass the URL as attribute parameter?

Updated

I want the click-element directive to be the one which handles navigation. The element would rather look like:

<div click-element="#/page1/test?Tab=1/">

In click-element directive:

 function clickElement( $location) {

            var clickElementDefinition = {
                restrict: 'A',
                scope: {
                    clickElement: "="
                },
                link: clickElementMethod
            };
            return clickElementDefinition ;

            function clickElementMethod(scope, element, attrs) {
                element.bind('click', function (event) {
                        if (scope.clickElement) {
                        var arr = scope.clickElement.split("?");
                        var queryParam = arr[1].split("=") || "";
                        $location.path(arr[0]).search(queryParam[0], queryParam[1]);
                    }
                });
            }
        };

I still get the lexer error on directive load.

You don't need # in your own ng-click="navigateTo('#/page1/test?Tab=1/'). What does your click-element directive do (code?)? — MacKentoch
– MacKentoch, Commented May 19, 2015 at 3:53
plnkr.co/edit/VGl6MSrjX9LPXMutguCl?p=preview The code works fine in this plunker, can you post the code of your directive? — Huy Hoang Pham
– Huy Hoang Pham, Commented May 19, 2015 at 3:55

BBS · Accepted Answer · 2015-05-19 04:22:45Z

2

You need to either add a second set of quotes to the click-element or use attrs.clickElement instead of scope.

<div click-element="'#/page1/test?Tab=1/'">

or

function clickElementMethod(scope, element, attrs) {
            element.bind('click', function (event) {
                    if (attrs.clickElement) {
                    var arr = attrs.clickElement.split("?");
                    var queryParam = arr[1].split("=") || "";
                    $location.path(arr[0]).search(queryParam[0], queryParam[1]);
                }
            });
        }

or

scope: {
     clickElement: "@"
},

edited May 19, 2015 at 4:22

answered May 19, 2015 at 4:12

BBS

1,4192 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JB Nizet Over a year ago

Or use clickElement: "@".

BBS Over a year ago

Good call. I reckon @ is probably a better way of doing it here.

Collectives™ on Stack Overflow

angularJS directive for href behavior

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related