CODEWITHSUNDEEP
angularjs
ed4becky
ed4becky

Reputation: 1620

Dynamic binding of ng-click?

When a user takes a certain action, I insert a link into the text of a contenteditable field:

var newElement = document.createElement('span');
newElement.innerHTML = "<a id='123' class='cite' href='' data-ng-click='review(123);'>[&#8225;]</span>";
range.insertNode(newElement);
$compile($(newElement).contents())($scope);

When the user clicks onthe new field, I want to execute the review method of the activate controller. ($scope.review = function(id) {...};)

Instead the page navigates to '#', without calling review();

I am assuing the click method doesn't get 'bound' to $scope.review() by a call to range.insertNode(newElement); ? I tried wrapping in an $apply, but that didn't work.

Upvotes: 3

Views: 6174

Answers (3)

sheppe
sheppe

Reputation: 718

You don't need an href tag at all in the element for ng-click to work. If you want the pointer to change on hover, you can use an inline style or css.

Upvotes: 0

Austhyma
Austhyma

Reputation: 61

In the code of your template, you can remove the href attribute altogether. If you want it to navigate, include that in the ng-click expression.

Upvotes: 0

Jussi Kosunen
Jussi Kosunen

Reputation: 8307

Use href="" instead of href="#" with Angular. The default action is always prevented if the href is empty. http://docs.angularjs.org/api/ng.directive:a

Also make sure to $compile that element. Ideally this would be a case for ng-repeat if what you're doing is essentially making a list of elements.

Upvotes: 2

Related Questions