CODEWITHSUNDEEP
javascriptangularjsng-view
nehas
nehas

Reputation: 247

Can you put elements directly inside ng-view?

I am creating a slideshow in angularJS and want to change the link of the navigational arrows based on the templateUrl. I don't want to have to have arrows with unique urls in each template so I thought I could create one set and place it inside the ng-view and then just change the link based on what template/controller I am using. Is this possible?

HTML:

<div ng-view>

  <div class="dashNav">
    <a ng-show="prevValue" href="#/{{prev}}"><img src="images/[email protected]" width="18"></a>
    <a ng-show="nextValue" href="#/{{next}}"><img src="images/[email protected]" width="18"></a>
  </div>

</div>

Javascript:

angular
  .module('ciscoImaDashboardApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/welcome.html',
        controller: 'mainCtrl'
      });

  });


angular.module('ciscoImaDashboardApp')
.controller('mainCtrl', function ($scope) {

    $scope.prevValue = false;
    $scope.nextValue = true;

});

Upvotes: 0

Views: 152

Answers (1)

developthewebz
developthewebz

Reputation: 1947

You could use some sort of navigation service...

app.factory('navService', function() {
  var routes = {
    steps: [{
      id: 0,
      title: 'Home',
      route: '/',
      nextValue: true,
      prevValue: false,
      prevStep: null,
      nextStep: 'about'
    },
    {
      id: 1,
      title: 'About',
      route: '/about',
      nextValue: true,
      prevValue: true,
      nextStep: 'contact',
      prevStep: ''
    },
    {
      id: 2,
      title: 'Contact',
      route: '/contact',
      nextValue: false,
      prevValue: true,
      nextStep: null,
      prevStep: 'about'
    }]
  };

  return routes;
});

Then in your controller, for example's sake, you could do something like this...

app.controller('MainCtrl', function($scope, navService, $location) {
  $scope.steps = navService.steps;
  $scope.prevValue = '';
  $scope.nextValue = '';
  $scope.prevStep = '';
  $scope.nextStep = '';
  $scope.route = '';

  $scope.$on('$routeChangeStart', function () {
    $scope.route = $location.path();
    for (var i=0; i<$scope.steps.length; i++) {
      if ($scope.route === $scope.steps[i].route) {
        $scope.prevValue = $scope.steps[i].prevValue;
        $scope.nextValue = $scope.steps[i].nextValue;
        $scope.prevStep = $scope.steps[i].prevStep;
        $scope.nextStep = $scope.steps[i].nextStep;
      }
    }
  });
});

Then in your view...

<body ng-controller="MainCtrl">
    <div class="dashNav">
      <a ng-show="prevValue" ng-href="#/{{prevStep}}"><img ng-src="{{prevImg}}">Prev</a>
      <a ng-show="nextValue" ng-href="#/{{nextStep}}"><img ng-src="{{nextImg}}">Next</a>
    </div>

    <ng-view></ng-view>

</body>

You can populate/store values, ng-href's, img sources, etc. through a service. In the Plunk below, I've stored the current route information in a service, and then I am sharing the information across each view's controller.

Plunk: http://plnkr.co/edit/Ii1y8pSlOeXbJJmxNq3F?p=preview

Upvotes: 1

Related Questions