0

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>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Rahul Matte
  • 1,151
  • 2
  • 23
  • 54

2 Answers2

1

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.

null
  • 7,906
  • 3
  • 36
  • 37
  • thanks @null How can I resolve the issue by listening $routeChangeSuccess – Rahul Matte Feb 10 '16 at 12:12
  • @ng-rahul have look at [this](http://stackoverflow.com/questions/14765719/how-to-watch-for-a-route-change-in-angularjs). – null Feb 10 '16 at 12:14
  • @ng-rahul If you are modifying DOM elements from somewhere _outside_ the `ng-view`; it's probably beter to do this _inside_ the `ng-view` by using a custom directive. This will also kill the need for listening to route change events. – null Feb 10 '16 at 12:17
  • so I can create the custom directive for .js file and add it into
    instead of import?
     – Rahul Matte Feb 10 '16 at 12:20
  • Include all javascript in your main `index.html` (don't include any ` – null Feb 10 '16 at 12:25
  • I've hacked together a [plunker](http://plnkr.co/edit/tlOteOPd9jiCFMq544CE?p=preview) that contains two views and a custom directive which will modify the DOM by setting a random background-color. – null Feb 10 '16 at 12:44
0

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.

Mario Lamacchia
  • 1,703
  • 1
  • 13
  • 19