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?

Improve this question
5
  • You custom-function.js should be a controller, directive or service inside angular, otherwise it's going to be hard to make it work. You should 'translate' you jquery code in an angular way of programming Commented Mar 19, 2015 at 13:11
  • You can put the related script tag <script src='lib/angularjs/custom-function.js' type="text/javascript"></script> to end of your view template which loaded in ng-view. Commented Mar 19, 2015 at 13:25
  • Hello @nerezo, we already try this, the script is loaded, but not working Commented Mar 19, 2015 at 13:27
  • @harmeet-singh-taara can you provide an example about what code is in your custom script? Commented Mar 19, 2015 at 13:33
  • @nerezo the method like $(document).ready(function() { } function for documents elements. Commented Mar 19, 2015 at 13:43

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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?
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.
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.
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.
@HarmeetSinghTaara please take a look below link for dynamic event binding: stackoverflow.com/questions/8752321/…
|
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-->
     })
   });
Improve this answer

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.