.js not getting applied on ng-view

333 Views Asked by Rahul Matte At 20 October 2024 at 13:06

I have the index.html with ng-view inside. I have imported respective .js file to the index.html but those .js not getting applied on injected view.

index.html

<!DOCTYPE html>
<html class="no-js css-menubar" lang="en" >
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>gg</title>  
  <!-- Scripts -->
    <script src="js/userdat.js"></script>
</head>
<body class="dashboard site-menubar-push" ng-app="app">
   <h1>Header</h1>

   <ng-view></ng-view> 

   <script src="assets/js/jquery-1.9.1.js"></script>
   <script src="assets/js/jquery.mobile-1.4.2.js"></script>
   <!-- AngularJS Angular-route -->
   <!--Angular linking -->
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js">
   </script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-resource.js">
   </script>  
</body>
</html>

The line <script src="js/userdat.js"></script> has jQuery stuff and it loads perfectly but the logic return in it not working on ng-view injected ui elements.if i import it in partials it works fine but not stable, Do you know How can I import it properly.

partials.html

<script src="js/userdat.js"></script>
<div class="jumbotron text-center">
   <h1>Home Page 4 Life</h1>
   <p>hi</p>
</div>

Original Q&A

There are 2 best solutions below

null On 10 February 2016 at 12:04 BEST ANSWER

Either place all the CDN includes (jquery, angular, ...) in the <head> element or place the the userdat.js at the bottom of the <body>.

Note that you if you're accessing DOM elements with JQuery that are injected into the ng-view, you'll need to listen to $routeChangeSuccess events because the html is modified after an angular digest.

Mario Lamacchia On 10 February 2016 at 11:54

The best way to do this would be using RequireJS, but it's going to be pretty tough if your project is already big.

With RequireJS you could even add a resolve to the route:

resolve: {
  userdat: function($q) {
    var deferred = $q.defer();
    require(['./js/userdat.js'], function(userdat) {
      deferred.resolve(userdat);
    });
    return deferred;
  }
}

If implementing RequireJS is too hard, I would just hardcode the code into the view.

.js not getting applied on ng-view

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in ANGULARJS-VIEW

Trending Questions

Popular # Hahtags

Popular Questions