I tried using directives to load the script but its not working, I've an application where it should display a chart(guage meter) inside a partial, tried to paste the script inside partial view but no use, even directives didn't work. But if the page is normally loaded its working, when its used as partial its not showing any chart (script related things)
Any simple example to make load the script inside partial views of angularjs?
index.html
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Customer Details</a></li>
<li><a ui-sref="about">Job Details</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
//JOB Section Navigations
.state('job', {
url: '/jobdetails',
templateUrl: 'jobdetails.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne@about': { template: 'Look I am a column!' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
routerApp.controller('scotchController', function($scope) {
$scope.message = 'test';
$scope.scotches = [
{
name: 'Macallan 12',
price: 50
},
{
name: 'Chivas Regal Royal Salute',
price: 10000
},
{
name: 'Glenfiddich 1937',
price: 20000
}
];
});
routerApp.directive('jsSidebar' , function() {
return {
link: function(scope, element, attrs) {
alert('testing');
}
}
});
partial-home.html
<div > Home partial page </div>
<a ui-sref="job"> Click to Display Chart </a>
<div ui-view></div>
jobdetails.html
<script >
//Chart library is mentioned which is over 2000lines
</script>
<!-- here chart supposed to be rendered-->
<div id="id_of_chart"></div>
<div jsSidebar >Testing purpose</div>
jsSidebaryou should name itjs-sidebarin your HTML. The dash tells the browser that it is a custom made attribute/element. – Mikey Feb 24 '15 at 12:15