ng-view 中的 Angularjs 变量答案

【问题标题】：Angularjs variable out of ng-viewng-view 中的 Angularjs 变量
【发布时间】：2017-01-29 11:00:15
【问题描述】：

我想为菜单设置特定变量以了解要激活哪个类。到目前为止，我知道如何在 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

【问题讨论】：

标签： javascript angularjs scope angularjs-rootscope

【解决方案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

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

【讨论】：

我不明白，如果我在函数 firstPage 中的 mCtr 中设置 vm.test，那么我如何在 OuterController 中插入该变量并在页面上显示？
你需要有一个服务。我会做一个编辑和一个 plunker
我知道如何使用服务发送http请求，但我不知道如何使用在控制器之间共享数据。如果你能用我的代码做 plunker，我会非常感谢这位客人。
我对您的代码进行了一些更改，以使其更简单，主要是通过删除所有冗余依赖项并将第一页和第二页分成两个不同的控制器。您的代码中的任何内容都不应破坏功能。
我现在看到了，我删除了我的评论，给我秒试试