Angularjs variable out of ng-view

Question

I want to have particular variable for menu to know which class to be active. Up to now I know how to set variable inside ng-view but I want to keep my menu out of that view. If I set variable in function in controller isn't visible outside of ng-view and that is exactly what I want to, to be visible. I try with rootscoope but I couldn't manage. If someone can help me my code is like this:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/main.css" rel="stylesheet">

    <title>Example</title>
</head>
<body>

<div class="container-fluid main-header">
    <a href="#/"><div class="main-menu-active">First page</div></a>
    <a href="#/second"><div class="main-menu">Second page</div></a>
</div>

    <div ng-view class="main-body"></div>

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<link href="libs/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="libs/ng-dialog/css/ngDialog-theme-default.css" rel="stylesheet">
<script src="libs/ng-dialog/js/ngDialog.js"></script>


<script src="app/app.js"></script>
<script src="app/controllers/mainCtr.js"></script>

</body>
</html>

app.js

(function () {
    'use strict';

    angular
        .module('example', ['ngRoute','ngDialog'])
        .config(function ($routeProvider,$httpProvider) {

            $routeProvider.when('/', {
                controller: 'mainCtr',
                controllerAs: 'mCtr',
                templateUrl: 'app/views/firstPage.html'
            });

            $routeProvider.when('/second', {
                controller: 'mainCtr',
                controllerAs: 'mCtr',
                templateUrl: 'app/views/secondPage.html'
            });

            $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

        }).run(function($http, $httpParamSerializerJQLike) {
            //decode json on every submit form
            $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
    })

})();

controller:

(function() {
    'use strict';

    angular
        .module('example')
        .controller('mainCtr', mainCtr);

    mainCtr.$inject = ['$window','$routeParams','ngDialog','$timeout'];

    function mainCtr($window,$routeParams,ngDialog,$timeout) {

        var vm = this;

        vm.firstPage = firstPage;
        vm.secondPage = secondPage;

        function firstPage() {
            vm.test = 'This is first page';
        }

        function secondPage() {
            vm.test = 'This is second page';
        }
    }
})();

I want to have access to variable vm.test in <div class="container-fluid main-header">

Anders Vestergaard · Accepted Answer · 2017-01-29T11:54:29.807

I would make a Controller around the ng-view which hold the value(s):

<body ng-controller="OuterController">

<div class="container-fluid main-header">
     <a href="#/"><div class="main-menu-active">First page</div></a>
     <a href="#/second"><div class="main-menu">Second page</div></a>
</div>

     <div ng-view class="main-body"></div>
...
</body>

and if you want to share data between the controllers in ng-view directive use a service.

So I've made a plunker to illustrate, how data sharing is accomplished: https://plnkr.co/edit/axekEgrFwnm93aFXoMKd

So the basic idea is to use a service and in someway either by button click as in the question or automatically in contoller as plunker, set the shared value.

Service

app.service('commonInfomation', function() {
  return {
    test: ''
  };
});

Inner controller

app.controller('FirstCtrl', function($scope, commonInfomation) {
  commonInfomation.test = "Hello from first page";
});

Outer controller

app.controller('MainCtrl', function($scope, commonInfomation) {
  $scope.commonInfomation = commonInfomation;

});

View

<body ng-controller="MainCtrl">

<h2>{{commonInfomation.test}}</h2>
  <div class="container-fluid main-header">
    <a href="#/">
      <div class="main-menu-active">First page</div>
    </a>
    <a href="#/second">
      <div class="main-menu">Second page</div>
    </a>
  </div>

  <div ng-view class="main-body"></div>


</body>

Module

var app = angular.module('plunker', ['ngRoute']);

app.config(function($routeProvider) {

  $routeProvider.when('/', {
      templateUrl: 'firstpage.html',
      controller: 'FirstCtrl'

    })
    .when('/second', {
      templateUrl: 'secondpage.html',
      controller: 'SecondCtrl'
    })
});

I don't get it, if I set vm.test in mCtr in function firstPage how then I can cath that variable in OuterController and show on page? — Sasa, Jan 29 '17 at 11:13
I know how to use service to send http request, but I don't know how to use to share data between controller. If you can make plunker with my code I will really appreciate that guest. — Sasa, Jan 29 '17 at 11:17
I've changed your code a bit to make it more simple for the average, mostly by removing all redundant dependencies and splitting first page and second page into two different controllers. Nothing in your code should break the functionallity. — Anders Vestergaard, Jan 29 '17 at 11:40
I have seen now, I deleted my comment, just give me sec to try — Sasa, Jan 29 '17 at 11:48
I figure out how it works, and I will try to adapt to my code. Thanks — Sasa, Jan 29 '17 at 11:56

Angularjs variable out of ng-view

1 Answers1