Angular JS: load custom javascript file in ng-view
Question
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?
3 answers
solution1
3 ACCPTED 2015-03-19 14:28:36
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:
solution2
0 2015-03-21 22:04:48
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-->
})
});
solution3
0 2015-08-03 22:28:52
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.