CODEWITHSUNDEEP
javascripthtmlangularjsuiviewangular-ui-router
Canet Robern
Canet Robern

Reputation: 1069

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

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');
});

Upvotes: 1

Views: 582

Answers (2)

Vivz
Vivz

Reputation: 6620

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?

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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

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

Upvotes: 1

Related Questions