2015-10-18 58 views
0

我想要返回到应用视图标题中的着陆页的链接,但显然不在着陆页本身。我如何在Angular.js中最优化地实现它?Angular.js - 根据视图显示链接

我应该使用$ location.url()来确定视图还是应该使用bind-html或其他东西?

感谢您的一些提示和帮助!

编辑

我当前的代码,我想我做了一点更容易,因为每个视图都有自己的控制器,但该链接总是显示:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style> 
</style> 
</head> 
<body ng-app="myApp"> 

<div data-role="page" id="pageone"> 
    <div data-role="header"> 
    <h1>WELCOME!</h1> 
    <a href="home" ng-show="!isLandingPage">BACK TO HOME</a> 
    </div> 

<div ng-view></div> 
    <div data-role="footer"> 
    <h1>footer</h1> 
    </div> 
</div> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> 
<script> 
'use strict'; 

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

app.config(function($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 

    $routeProvider 
     .when('/', { 
      templateUrl : 'views/home.html', 
      controller : 'HomeController' 
     }) 
     .when('/other', { 
      templateUrl : 'views/other.html', 
      controller : 'OtherController' 
     }); 
}); 

app.controller('HomeController', function($scope, $http, $location, $route) { 

$scope.isLandingPage = true; 

}); 

app.controller('OtherController', function($scope, $route) { 
    $scope.info = 'Other'; 
}); 

</script> 

</body> 
</html> 

回答

1

链接总是显示,因为您的div中链接不附加任何控制器。

你可以这样来做:

app.controller('landingPageCtrl', ['$scope', '$location', function($scope, $location){ 
     $scope.isLandingPage = function(){ 
      return ($location.url() == '/home') ? true : false; 
     } 
}]); 

然后使用NG-显示隐藏或根据部位

<div ng-controller="landingPageCtrl" data-role="header"> 
    <h1>WELCOME!</h1> 
    <a href="home" ng-show="!isLandingPage()">BACK TO HOME</a> 
</div> 
+0

完美, 奇迹般有效!谢谢!! – user3813234

0

我喜欢检查我的路线(或在ui.router中的状态)。

$scope.isLandingPage = $state.current.name === 'home';

,并使用<a ng-show="!isLandingPage">Link</a>

+0

感谢您的答复显示的链接,我编辑我的问题 – user3813234