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-29 11:54:29Z

1

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

edited Jan 29, 2017 at 11:54

answered Jan 29, 2017 at 11:08

Anders Vestergaard

1,1491 gold badge14 silver badges21 bronze badges

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

6 Comments

Sasa Over a year ago

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?

Anders Vestergaard Over a year ago

You need to have a service. Ill make a edit and a plunker

Sasa Over a year ago

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.

Anders Vestergaard Over a year ago

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.

Sasa Over a year ago

I have seen now, I deleted my comment, just give me sec to try

|

Collectives™ on Stack Overflow

Angularjs variable out of ng-view

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related