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
– venkatesh52, Commented Feb 24, 2015 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
– Michelangelo, Commented Feb 24, 2015 at 12:15
Getting an error now // $(...).GuageProperitesFunction is not a function.. /*** Part of script in jobdetails.html ***/ <script> $("#id_of_chart").GuageProperitesFunction({ //List of properties in jobdetails.html }); </script> — venkatesh52
– venkatesh52, Commented Feb 24, 2015 at 12:57

Community · Accepted Answer · 2017-05-23 11:55:09Z

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, 2017 at 11:55

CommunityBot

11 silver badge

answered Feb 24, 2015 at 11:55

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

1 Comment

venkatesh52 Over a year ago

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)?

chirag_lad · Accepted Answer · 2017-05-21 06:03:21Z

1

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.

answered May 21, 2017 at 6:03

chirag_lad

2492 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angularjs - javascript not loading inside partial views

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related