Adding angular attributes after angular bootstraps

Question

I have a section of HTML which the user will be in control of, but I need to give certain elements an ng-click. I know the general structure of the html will be a ul with li's for each page, and ul's inside those li's with other li's for each sub-page. But this will be entirely controlled by the user and I can't touch the HTML directly.

Say someone has created:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#blog">Blog</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

and I want to turn it into:

<ul>
  <li><a ng-click="$event.preventDefault(); openPage($event.target)" href="#home">Home</a></li>
  <li><a ng-click="$event.preventDefault(); openPage($event.target)" href="#about">About</a></li>
  <li><a ng-click="$event.preventDefault(); openPage($event.target)" href="#blog">Blog</a></li>
  <li><a ng-click="$event.preventDefault(); openPage($event.target)" href="#contact">Contact</a></li>
</ul>

How can I do this after the page has loaded and angular has already bootstrapped? I know that typically, the solution would be to create a directive for anchor tags that replaces them, but I need the text in the anchor tags to remain as whatever the user set, I need the href to remain the same, and I need it to ONLY affect the anchor tags within this section. It can't effect any anchor tags outside of the parent ul tag.

Simply put, is there anything similar to using jquery to add attributes?:

$('ul').find('a').attr('ng-click', '$event.preventDefault(); openPage($event.target)');

score 1 · Answer 1 · answered Jun 19 '14 at 21:02

1

Would this work? http://plnkr.co/edit/vxowNUAnbQSkuiHpNvYZ

Leaving the href attribute empty prevents the default in angular.

After the application has bootstrapped you can populate the "options" collection in your model at the same point in your application where you would run the jQuery in your example above.

Let me know what you think.

answered Jun 19 '14 at 21:02

JDTLH9

1,765
1
23
34

Whilst this may theoretically answer the question, [it would be preferable](https://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Please [edit] the post and update the answer. – Cœur Jul 21 '18 at 10:41

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

You might be interested by this post : How to think Angular with a jQuery background.

You usually don't want to override ng-click and stuff like that. It usually shows a design problem, and won't work out in most cases.

What you probably want here is a directive on, for example, class="menu-link" :

angular.module('foomodule', [])
  .directive('menuLink', {
    restrict: 'C', // C for class
    link: function (scope, element, attributes, parentController) {
      element.on('click', function () {
        scope.openPage(element.attr('href'));
        return false;
      });
    }
  });

edited May 23 '17 at 12:05

Community

1
1

answered Jun 19 '14 at 21:03

Ven

19,015
2
41
61

So I could add the `class="menu-link"` via jquery and use the link function of the directive to manipulate the object? – mmm Jun 20 '14 at 18:12
Do you need to add items to your menu dynamically ? – Ven Jun 20 '14 at 18:17
Just once when the page loads. – mmm Jun 20 '14 at 18:29
Then I'd agree with a ng-repeat solution. – Ven Jun 20 '14 at 18:30
I can't touch the actual html aside from using javascript to manipulate it when the page loads. I'm making a third party app for a website creation software so the user will create and name pages which will automatically become a ul with li's and other ul's inside li's for subitems. – mmm Jun 20 '14 at 18:33

Adding angular attributes after angular bootstraps

2 Answers2