文章/答案/技术大牛

发布

问Angularjs变量退出ng-视图
EN

Stack Overflow用户

提问于 2017-01-29 11:00:15

回答 1查看 703关注 0票数 1

我希望菜单中有一个特定的变量来知道哪个类是活动的。到目前为止，我知道如何在ng视图中设置变量，但我希望将我的菜单保留在该视图之外。如果我在控制器中设置了函数中的变量，在ng视图之外是不可见的，而这正是我想要的，是可见的。我试着用根铲，但我没办法。如果有人能帮我，我的代码是这样的：

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">中的变量<div class="container-fluid main-header">

javascript

angularjs

scope

angularjs-rootscope

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-29 11:08:12

我会在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视图指令中的控制器之间共享数据，请使用服务。

因此，我制作了一个柱塞来说明数据共享是如何实现的：https://plnkr.co/edit/axekEgrFwnm93aFXoMKd

因此，基本思想是使用一个服务，或者以某种方式按一下问题中的按钮，或者在contoller中自动作为柱塞设置共享值。

服务

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41920135

复制

相似问题

问Angularjs变量退出ng-视图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs变量退出ng-视图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs变量退出ng-视图
EN