2

I am using Angular Js for front-end of my sample, created a template and loaded views dynamically according to requirement. I am using angular, jquery and cusotm js for my sample application. My templates worked fine and basic structure is as follows: 

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  ---------------- bootstap, css etc ----------- stylesheet include
  <script src='assets/js/angular.min.js' type="text/javascript"></script>
</head>

<body>
 <div ng-view></div>
</body>

-------------------- jquery, bootstrap ---------- javascript include
<script src='lib/angularjs/angular-route.js' type="text/javascript"></script>
<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>

When the application runs, all my script and style-sheets are loaded successfully. But in my custom-function.js, I am using, elements id and classes for performing some work. When the custom-function.js loaded there are no document structure is defined, because the document is loaded dynamically using <div ng-view></div>.

I am also trying to include <script src='lib/angularjs/custom-function.js' type="text/javascript"></script> in my document, which is dynamically loaded by angular, but custom-function.js function is not running.

I am new in angular, I searched google, but still not find any appropriate solution. how could I solve this?

Kailas
  • 7,350
  • 3
  • 47
  • 63
Harmeet Singh Taara
  • 6,483
  • 20
  • 73
  • 126

3 Answers3

3

With helps of ngRoute a template can be loaded which is containing a script tag which includes the js file contains javascript codes that we wanted to run.

Please take a look the below example for usage:

http://embed.plnkr.co/AonatjhKlPMaOG6vVWW1/preview

okanozeren
  • 555
  • 4
  • 10
  • thanks for your help, the `$(document).ready(function() { })` function work fine, but my elements events are not bind. After seaching google, mostly developers say that, use `$(window).load(function() { })` instead of document, because your elements are not loaded properly, but in document function i am also find the element object successfully. In my `custom js` file, when i use `$(window).load(function() { })` this will not work. how i can do this? – Harmeet Singh Taara Mar 19 '15 at 16:44
  • when i trying to access `alert($("#element))`, this is show the object. But when i trying to access `alert($("#element)[0])` this is show `element undefine`, in `$(document).ready(function() { })` function. – Harmeet Singh Taara Mar 19 '15 at 16:56
  • Hi @HarmeetSinghTaara, I updated the plnkr script above. I can select a field from between the body tag and from the other loaded template successfully. And also I can change values or styles of them and bind methods. As I see, you had forgot a quote char on your selector `alert($("#element))` after the **#element**. – okanozeren Mar 19 '15 at 22:33
  • new problem i face is that, when my page is load, the images are fetch from another server and it takes time. that's why, my events in `$(document).ready(function() { })` are not bind. If i but these events on delay, they work properly. – Harmeet Singh Taara Mar 20 '15 at 08:00
  • @HarmeetSinghTaara please take a look below link for dynamic event binding: http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht – okanozeren Mar 20 '15 at 08:23
  • you example is really good. but the problem is that, our element object is found but events are not register. if we use `delay 1500`, then events register successfully. – Harmeet Singh Taara Mar 20 '15 at 10:17
0

This sample might help you to find some solution using 'ngRoute' module to load what you want to show in your 'ng-view' you can give your instructions in .js file. 

    <script src="yourinstruction.js"></script>

    </head>
    <body ng-app='base'>


    <div ng-view></div>

    <script>

   var router = angular.module('base', ['ngRoute']);

    router.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/home.html',controller:'test'
          }).otherwise({

            redirectTo: '/'
          });
      }]);


    </script>
    <!--other codes-->

yourinstruction.js file

  router.controller('test',function ($scope) {
    <!--your instructions-->
     })
   });
shermi
  • 149
  • 1
  • 4
0

You can solve this issue using '$viewContentLoaded' as shown in this tutorial: http://www.aleaiactaest.ch/2012/06/28/angular-js-and-dom-readyness-for-jquery/

Another way is by dependency injection (the Angular way). The first part of this tutorial show us how to include an external lib by using dependecy injection. http://www.ng-newsletter.com/posts/d3-on-angular.html

Rochadsouza
  • 888
  • 10
  • 10