Boostrap and Angular's ng-include directive

Question

So, I have the following situation: in my main index.html page:

<aside>
    <ul class="nav nav-pills nav-stack" id="myAffix">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</aside>

and in my menus.js:

 $('#myAffix').affix({
        offset: {
            top: 100
        }
    });

This is supposed to make the unordered list stick after scrolling down 100px. And it does the job perfectly.

But, after moving my aside to another .html file (aside.html), and including it in my index.html like this:

<div ng-include="'aside.html'"></div>

the aside element won't stick anymore. I am also loading the script at the end of the body tag in index.html. How can I fix this issue?

Answer 1

EDIT: Working plunker solution: http://plnkr.co/edit/rQJt3h

Yes you're having a load order issue. The solution involves using a directive.

In my opinion, people are being opinionated when telling not to use jQuery with AngularJS. Yes - you should do all DOM manipulation in directives.

In order to use the Bootstrap JavaScript Plugin, you can wrap the affix initialization in a directive:

app.directive('bootstrapAffix', function() {
  return {
    link: function(scope, element, attrs) {
      $(element).affix({ offset: $(element).parent().offset().top });
    }
  }
});

And then attach it to your element:

<aside bootstrap-affix> ... </aside>

Remember to include CSS!