Angularjs - javascript not loading inside partial views

Question

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>

No, its clean, scripts were not loading , that was the only issue — venkatesh52, Feb 24 '15 at 12:09
Ok. Well seems like there is some conflict. Does you chart maker use jQuery? By the way: if you make a directive called `jsSidebar` you should name it `js-sidebar` in your HTML. The dash tells the browser that it is a custom made attribute/element. — Michelangelo, Feb 24 '15 at 12:15
Getting an error now // $(...).GuageProperitesFunction is not a function.. /*** Part of script in jobdetails.html ***/ — venkatesh52, Feb 24 '15 at 12:57

score 2 · Answer 1 · edited May 23 '17 at 11:55

2

ng-view will not load the scripts inside the template.
Check this.. https://stackoverflow.com/a/18220411/4578788 for more details.

edited May 23 '17 at 11:55

Community

1
1

answered Feb 24 '15 at 11:55

Vinay K

5,562
1
18
27

I have multiple pages which are to be loaded onclick (each click takes you to different page view), along with separate scripts for each individual partial view page. What is the best approach to achieve it (using angularjs)? – venkatesh52 Feb 24 '15 at 12:07

score 1 · Answer 2 · answered May 21 '17 at 06:03

Angular uses a stripped down version of jquery (jQLite) which has some DOM limitations which prevents it from executing a script file in partial view.

Solution

Reference a jQuery script before referencing main AngularJS script in your index.html. This will make angular to use jQuery instead of jQlite.

Angularjs - javascript not loading inside partial views

2 Answers2

Linked