2015-10-18 53 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