In AngularJS, loaded content by ui-view cannot read javascript file in parent content

Question

I want to insert header and nav bar into index.html

When header and nav bar are in index.html, My app works well.

but seperate these files to html and try to load, ui-view do not load script files.

So logout function does not work when ui-view loaed header.html

On the other hand, css works well.

I tried to follow answers like

Angularjs does not load scripts within ng-view

or

html partial is not loaded into ui-view

but it did not help to fix my problem..

Why this situation occurred?

Please any handsome or pretty developer help me..

These are my code.

app.js

'use strict';

var mainApp = angular
.module('adminApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
]);

mainApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/admin/login');
    $stateProvider
    .state('root',{
        url: '',
        abstract: true,
        views: {
            'headerContainer': {
                templateUrl: 'views/header.html',
                controller: 'HeaderCtrl',
                controllerAs: 'header'
            },
            'navContainer':{
                templateUrl: 'views/nav.html',
                controller: 'NavCtrl',
                controllerAs: 'nav'
            }
        }
    })
    .state('root.login', {
        ...
    })
});

index.html

<!DOCTYPE html>
<html ng-app="adminApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin</title>

    <base href="/">

    <!-- CSS-->
    <link href="bower_components/bootstrap/dist/css/main.css" rel="stylesheet">

    <!-- Font-icon css-->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- start: Favicon -->
    <link href="favicon.ico" rel="shortcut icon">
    <!-- end: Favicon -->

</head>
<body class="sidebar-mini fixed" ng-controller="AppCtrl">

<div class="wrapper">

    <div ui-view="headerContainer"></div>
    <div ui-view="navContainer"></div>

    <div ui-view="appContainer"></div>

</div>

<!-- Javascripts-->
<script src="../bower_components/bootstrap/dist/js/jquery-2.1.4.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap/dist/js/main.js" ></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/headerCtrl.js"></script>
<script src="scripts/controllers/navCtrl.js"></script>

</body>
</html>

header.html

<header class="main-header hidden-print">
    <nav class="navbar navbar-static-top">
        <div class="navbar-custom-menu">
            <ul class="top-nav">
                <li>
                    <a ng-click="logout();">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

headerCtrl.js

mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {

    $scope.logout = function () {
        angular.forEach($cookies.getAll(), function (v, k) {
            $cookies.remove(k);
        });     //  This is for remove all cookies
    };
});

main.js

$('.top-nav li a').on('click', function (e) {
    console.log('Clicked header li');
});

Try using relative path like templateUrl: '/views/header.html', — Vivz
– Vivz, Commented Aug 23, 2017 at 9:14
@Vivz I tried that just now, but still not working.. thanks to your comment. — Canet Robern
– Canet Robern, Commented Aug 23, 2017 at 9:20
Can you show your headerCtrl.js and what is present inside main.js? — Vivz
– Vivz, Commented Aug 23, 2017 at 9:36

Pankaj Parkar · Accepted Answer · 2017-08-23 09:18:54Z

1

It seems like you haven't used controller alias while calling logout method

ng-click="header.logout();"

answered Aug 23, 2017 at 9:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Canet Robern Over a year ago

this didn't work for me. Actually, I write the code in main.js to see console logs when I click that, but any logs was not appeared.

Pankaj Parkar Over a year ago

@CanetRobern Can you please provide a plunker?

Canet Robern Over a year ago

I am really sorry but, I just started learn developing.. so I don't know how to use plunker..

Vivz · Accepted Answer · 2017-08-23 09:54:20Z

1

As @pankaj said you need to declare the logout method on your controller alias

ng-click="header.logout();"

And the same applies for your js. You have to reference logout with this keyword since you are using controller as syntax

mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
    var vm =this;
    vm.logout = function () {
        angular.forEach($cookies.getAll(), function (v, k) {
            $cookies.remove(k);
        });     //  This is for remove all cookies
    };
});

For more Info: AngularJs "controller as" syntax - clarification?

answered Aug 23, 2017 at 9:54

Vivz

6,6282 gold badges19 silver badges34 bronze badges

4 Comments

Canet Robern Over a year ago

I don't think this code working because, even function to see log in main.js did not work.

Vivz Over a year ago

Try to put a debugger inside logout and see if the function is getting called

Canet Robern Over a year ago

well, I did what you said but I've got nothing.

Canet Robern Over a year ago

Nothings in console.

Collectives™ on Stack Overflow

In AngularJS, loaded content by ui-view cannot read javascript file in parent content

app.js

index.html

header.html

headerCtrl.js

main.js

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

app.js

index.html

header.html

headerCtrl.js

main.js

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related