显示/隐藏基于 ng-view 内容的元素答案

【问题标题】：Show/Hide an element on base of ng-view content显示/隐藏基于 ng-view 内容的元素
【发布时间】：2015-11-26 08:50:32
【问题描述】：

我有一个简单的 div（class= 蓝色），仅当我定位到 ngRoute 中的“two.html”而不是一个“one.html”或“three.html”时才显示该 div - 角度路由。有人可以解决它吗？

HTML：

<html>
<head>
<!-- Start Required -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src= "angularScript.js"></script>
<!-- End Required -->
<script src= "angularScript.js"></script>
<style>
.blue {height:300px;width:300px;background:red;}
</style> 
</head>

<body ng-app="myApp" ng-controller="myCtrl"> 
<div class="blue"></div> 
Below will be the content:
<div ng-view=""></div>
<a href="#/one">One</a>
<a href="#/two">Two</a>
<a href="#/three">Three</a>
</body> 
</html>

angularScript.js

//App Declaration 
var app = angular.module('myApp', ['ngRoute'] );

//Controllers 
app.controller('myCtrl', function($scope) {});
app.controller('oneCtrl', function($scope) {});
app.controller('twoCtrl', function($scope) {});
app.controller('threeCtrl', function($scope) {});

//Routers 
app.config(function($routeProvider){

    $routeProvider
    .when('/one', {
        title: 'one',
        controller: 'oneCtrl',
        templateUrl: 'one.html'
    })  
    .when('/two', {
        title: 'two',
        controller: 'twoCtrl',
        templateUrl: 'two.html'
    })  
    .when('/three', {
        title: 'three',
        controller: 'threeCtrl',
        templateUrl: 'three.html'
    })  
    .otherwise({
        title: 'one',
        redirectTo: '/one'
    });
});

one.html

This is one

两个.html

This is two

three.html

This is three

有人可以帮助我根据我的 ng-view 所遵循的路线有条件地选择隐藏/显示我的 div 吗？

【问题讨论】：

标签： angularjs controller routing angularjs-scope ngroute

【解决方案1】：

您可以在MyCntrl 中使用如下所示的函数，该函数使用$location 检查路径中是否包含"two"

    $scope.isSecondPage = function(){
      if($location.path().search(/^\/two/) == -1)   
        return false;
      else
        return true;
};

并且可以在你想有条件地隐藏的div中的ng-show/ng-if中使用它。

<div class="blue" ng-show="isSecondPage()"></div>

【讨论】：