How to make angular load jquery inside ng-include?

Question

I am trying to apply some jquery in my code, but it's not working because i am using with ng-include, how can i solve this?

html:

    <html lang="" ng-app="">
     <head></head>
      <body>
        <div class="menu">
          <nav class="sidebar">
          <nav class="sidebar">
              <div ng-include="'app/client.html'"></div>
            </nav>
          </nav>
        </div>
        <script type="text/javascript">
           $(function() {
            $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
           });
        </script>
    </body>
    </html>

client.html

<div class="client">
      <div class="client-open">
        <ul class="sidebar-nav">
          <li>link1</li>
          <li>link</li>
        </ul>
      </div>
</div>

js:

$(function() {
  $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});

Check http://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include — Fissio, Dec 07 '16 at 12:43
Also, to be fair, you shouldn't need jQuery here in the first place, check out [ng-class](https://docs.angularjs.org/api/ng/directive/ngClass) — Fissio, Dec 07 '16 at 13:07

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

First proposed solution

Make sure that Jquery is loaded in your application before AngularJs.
Move the script inside client.html

Second proposed solution

Make sure that Jquery is loaded in your application before AngularJs.

Move your script into the controller as in the following example

    app.controller("myCtrl", function($scope, $rootScope,$timeout) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $rootScope.$on('$includeContentLoaded', function() {
    $timeout(function(){
         load();
    });
  });

});

And then enter your function as in the following example

var load = function() {

$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');

}

You can refer to this SO question for more info. Angular: ng-include, jQuery not working unless in HTML file

edited May 23 '17 at 11:46

Community

1
1

answered Dec 07 '16 at 12:56

AhmedHamad

131
5

2

Both solutions are really bad practices and should never be used. – dfsq Dec 07 '16 at 13:00
2

So What is the best practice for this situation from your experience? – AhmedHamad Dec 07 '16 at 13:05
1

If DOM mutations is absolutely needed (which I don't know in OP's case), then I would create a directive, which linking function would be invoked at proper moment of lifecycle. Usage of jQuery, modifying parts of the app outside of the app itself, should be avoided. – dfsq Dec 07 '16 at 13:07

score 0 · Answer 2 · answered Dec 07 '16 at 13:12

One way of solving this is by creating a custom directive and adding it to div.client , then you can add your jquery code in the compile or link function of that directive.

HTML

<div class="client" load-evt>
 ...
</div>

Angular Directive

app.directive("loadEvt", function(){
 return {
   restrict: "A",
   compile: function(elem){
     //write your code in compile phase
   },
   link: function(elem, scope){
    //or write your code in link phase
   } 
 }
})

score 0 · Answer 3 · answered Dec 07 '16 at 13:17

Why would you want to use jQuery and angular together?
These are 2 libraries that help you write a webapp, but go about it a VERY different way.

If you need jQuery to modify classes, you should simply use ng-class, as @fissio suggested. But in the usecase you provided, just add class="tech" to the second li. (I presume this isn't really what you wanted to know)

<div class="client">
  <div class="client-open">
    <ul class="sidebar-nav">
      <li>link 1</li>
      <li class="tech">link 2</li>
    </ul>
  </div>
</div>

score 0 · Accepted Answer · answered Dec 07 '16 at 13:37

Code to alter the DOM directly should go into directive. Create a directive and attach it to the element you are trying to modify.

Plunkr - https://plnkr.co/edit/AIRb3egGSMkWfd2gpekL?p=preview

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script>
      angular.module('app', [])
      .directive('attachJquery', function() {
          return {
              restrict: 'A',
              link: function (scope, element) {
                  $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
              }
          };
      })
    </script>
    <style>
      .tech {
        color: red;
      }
    </style>
  </head>

  <body>
    <div class="menu">
      <nav class="sidebar">
        <nav class="sidebar">
          <div ng-include="'client.html'"></div>
        </nav>
      </nav>
    </div>
  </body>

</html>

client.html

<div class="client" attach-jquery>
      <div class="client-open">
        <ul class="sidebar-nav">
          <li>link1</li>
          <li>link</li>
        </ul>
      </div>
</div>

Also, note that 'element' attribute in directive's link function is actually a jquery wrapped element to which the directive is attached to. In this case, it is div.client element. You can directly use that and it is the recommended way. — elango.dev, Dec 07 '16 at 15:53

How to make angular load jquery inside ng-include?

4 Answers4