Easy way to access $route from html side in AngularJS

Question

Is there a way to access $route from the html side of AngularJS?

I'd really like to do something like this in HTML and eliminate yet another $scope function. (yes, i know its not really something that works):

<button ng-disabled="!route.current.scope.currentform.$valid">

I am working on a large angular application that is somewhat 'down the road' in the development cycle. At this time we have decided to implement form validation (don't ask why it wasn't 1 or 2 on the list).

I am currently using two buttons in the footer "previous" and "next", both which need to ng-disabled set to !$scope.formname.$valid. This needs to work across multiple controllers / pages, since the buttons are in my footer on index.html.

The code i'm using right now looks like this:

// Want to eliminate this isFormValid() method
$scope.isFormValid = function() {
  if ($route.current) {
    if ($route.current.scope) {
      return !$route.current.scope.currentform.$valid;
    }
  }
};

$scope.prevPage = function() {
  if (angular.isFunction($route.current.scope.PrevAction)) {
    // do stuff particular to the current controller
    $route.current.scope.PrevAction()
  }
};

$scope.nextPage = function() {
  if (angular.isFunction($route.current.scope.NextAction)) {
    // do stuff particular to the current controller
    $route.current.scope.NextAction()
  }
};

and the corresponding button code is as follows:

<div class="footer">
  <button id="main-prev-button" type="button" class="btn btn-primary previous" ng-click="prevPage($event)" ng-disabled="isFormValid()">Previous</button>
  <button id="main-next-button" type="button" class="btn btn-primary next" ng-click="nextPage($event)" ng-disabled="isFormValid()">Next</button>
</div>

Each page code looks something like this

<ng-form id="currentform" name="currentform">

  <label>Full Name</label>
  <input type="text" class="form-control" ng-model="nl.firstName" id="firstName" placeholder="First Name" name="firstName" ng-minlength="5" ng-maxlength="20" ng-required="true">
  <pre>currentform.firstName.$error = {{ currentform.firstName.$error | json }}</pre>

  <ng-messages for="currentform.firstName.$error">
    <ng-message when="required">You did not enter a field</ng-message>
    <ng-message when="minlength">Your field is too short</ng-message>
    <ng-message when="maxlength">Your field is too long</ng-message>
  </ng-messages>

</ng-form>

ShankarSangoli · Accepted Answer · 2015-05-27 13:54:57Z

2

Add the $route to the root scope $rootScope and then access it in your html/view using the $rootScope.$route.

E.g:

angular.module('myApp').run(['$rootScope', '$route',
    function ($rootScope, $route) {
       $rootScope.$route = $route;
}]);

answered May 27, 2015 at 13:54

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

1 Comment

CarComp Over a year ago

This works nicely. We have been trying to use the run area as a good starting place for scope inheritance on different sections of our site.

Collectives™ on Stack Overflow

Easy way to access $route from html side in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related