Angularjs переменная из ng-view

Я хочу иметь определенную переменную для меню, чтобы узнать, какой класс будет активным. До сих пор я знаю, как установить переменную внутри ng-view, но я хочу сохранить свое меню в этом представлении. Если я устанавливаю переменную в функции в контроллере, то не видна вне ng-view, и это именно то, что я хочу, чтобы быть видимым. Я стараюсь с корнем, но я не мог справиться. Если кто-то может помочь мне мой код выглядит так:Angularjs переменная из ng-view

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

})();

контроллер:

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

Я хочу, чтобы иметь доступ к переменная vm.test в <div class="container-fluid main-header">

источник

2017-01-29 Sasa

я хотел бы сделать контроллер вокруг нг ракурса, который содержит значение (ы):

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

и если вы хотите, чтобы обмениваться данными между контроллерами в директиве нг ракурса использовать service.

Так что я сделал plunker, чтобы проиллюстрировать, как обмен данными осуществляется: https://plnkr.co/edit/axekEgrFwnm93aFXoMKd

Поэтому основная идея заключается в том, чтобы использовать службу и каким-то образом либо нажатием кнопки, как в вопросе или автоматически в качестве регулятора, plunker, установите общее значение.

служба

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

Внутренний контроллер

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

Внешний контроллер

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

});

Посмотреть

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

Модуль

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

app.config(function($routeProvider) { 

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

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

источник

2017-01-29 11:08:12

Я не понимаю, если я изложу vm.test в mCtr в функции Firstpage как тогда я могу Cath эту переменную в OuterController и показать на странице? – Sasa

Вам необходимо иметь сервис. Я делаю редактирование и plunker –

Я знаю, как использовать службу для отправки http-запроса, но я не знаю, как использовать для обмена данными между контроллером. Если вы можете сделать плункер с моим кодом, я буду очень признателен этому гостю. – Sasa

ответ

Смежные вопросы