Angularjs变量超出ng-view

我想让菜单的特定变量知道哪个类是活动的。到目前为止，我知道如何在ng-view中设置变量，但我想让菜单远离该视图。如果我在控制器中的函数中设置变量在ng-view之外是不可见的，那正是我想要看到的。我尝试与rootscoope，但我无法管理。如果有人能帮助我，我的代码是这样的：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

我会让周围的NG视其持有的值（多个）控制器：

<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-观点指令共享控制器之间的数据使用service。

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

所以基本想法是使用一个服务，以某种方式或者通过点击按钮在问题或自动作为位指示抢劫者，设置共享价值。

服务

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

我不明白这一点，如果我在mCtr在功能设置FIRSTPAGE我vm.test那么如何能在CATH该OuterController变量并在页面上显示？ – Sasa

你需要有一个服务。我做了一个编辑和一个plunker –

我知道如何使用服务发送http请求，但我不知道如何使用控制器之间共享数据。如果你可以用我的代码让你沉醉，我会非常感谢这位客人。 – Sasa

Angularjs变量超出ng-view

回答

相关问题