-1

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');
});
Improve this question
5
  • 2
    Check stackoverflow.com/questions/12197880/… Commented Dec 7, 2016 at 12:43
  • @Fissio It's a different problem there. Commented Dec 7, 2016 at 12:57
  • @dfsq yes it is a different problem. Commented Dec 7, 2016 at 13:02
  • Oh, you're right. Hmm. Can you move the <script> block into client.html? Commented Dec 7, 2016 at 13:05
  • 1
    Also, to be fair, you shouldn't need jQuery here in the first place, check out ng-class Commented Dec 7, 2016 at 13:07

4 Answers 4

Reset to default
0

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="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="[email protected]" 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
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

Improve this answer

3 Comments

Both solutions are really bad practices and should never be used.
So What is the best practice for this situation from your experience?
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.
0

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
   } 
 }
})
Improve this answer

Comments

0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.