Angular.js - show link depending on view

Question

I would like to have a link back to the landing page in the header of my app's views but obviously not on the landing page itself. How would I optimally implement that in Angular.js?

Should I use $location.url() to determine the view or should I use bind-html or something else altogether?

Thanks for some tips and help!

EDIT

my current code, I thought I'd made it a little easier since each view has its own controller, however the link is always shown:

<!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>

Danijel · Accepted Answer · 2015-10-18 12:00:07Z

1

The link is always shown because your div in which is link doesn't have any controller attached.

You can do it this way:

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

then use ng-show to hide or show link depending on location

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

answered Oct 18, 2015 at 12:00

Danijel

414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Norbert Huurnink · Accepted Answer · 2015-10-18 10:18:49Z

0

I like to check for my route (or state in ui.router).

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

and use <a ng-show="!isLandingPage">Link</a>

answered Oct 18, 2015 at 10:18

Norbert Huurnink

1,32610 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular.js - show link depending on view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related