Angularjs 变量超出 ng-view

Question

我想为菜单设置特定变量，以了解哪个 class 处于活动状态。到目前为止，我知道如何在 ng-view 中设置变量，但我想让我的菜单远离该视图。如果我在控制器中的函数中设置变量在 ng-view 之外不可见，这正是我想要的，可见。我尝试使用 rootscoope，但我无法管理。如果有人可以帮助我，我的代码是这样的：

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

我想访问 <div class="container-fluid main-header">

中的变量 vm.test

Answer 1

我会在 ng-view 周围创建一个控制器，其中包含以下值：

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

如果您想在 ng-view 指令中的控制器之间共享数据，请使用 service.

所以我做了一个plunker来说明，数据共享是如何完成的：https://plnkr.co/edit/axekEgrFwnm93aFXoMKd

因此，基本思想是使用服务，并以某种方式通过问题中的按钮单击或自动在 contoller 中作为 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'
    })
});

Angularjs 变量超出 ng-view

Angularjs variable out of ng-view

javascript

scope

angularjs

angularjs-rootscope