CODEWITHSUNDEEP
angularjs
Varun Sharma
Varun Sharma

Reputation: 4842

How to navigate one page to another page with $scope value parameter in data-ui-sref in Angular Js?

I am using angular js for the web application. So I want to navigate one page to another page with some parameter in data-ui-sref. When I use static parameter then it will navigate with parameter.

Example:
<a data-ui-sref="app.admin({startFrom:'param1',endTo:'param2'})">click</a>

Module.js

    .state('app.admin', {
        url: '/travlers?startFrom&endTo',
        data: {
          title: 'travelers'
        },
        params :
        {
           startFrom: null,
           endTo:null

         },
       views: {
      "content@app": {
        templateUrl: 'app/admin.html',
        controller: 'admin'
      }
    }
    });

If I used static parameter in data-ui-sref then it will work. But If I take from scope value in parameter then it is not working.

When I use scope value in data-ui-sref parameter

example.html

 <a data-ui-sref="app.admin({startFrom:'{{dateFrom}}',endTo:'{{dateTo}}'})">click</a>

example.js

angular.module('app.admin').controller('example', function () {
      $scope.dateFrom="07-05-17";
      $scope.dateTo="07-05-17"
});

When I see in console then scope value is append in data-ui-sref parameter

When I see in console then it is looks like this

<a data-ui-sref="app.systemAdmin.travelers({startFrom:'07-05-17',endTo:'07-05-17'})" class="fa fa-external-link-square" aria-hidden="true" style="font-size:18px;color:#fff" href="#/systemadmin/travlers">click</a>

After click the link then parameter is not going to module.js. URL is form without parameter and parameter(dateFrom,dateTo) is not going in state url. I have seen one link. But it is for dynamic value Dynamically set the value of ui-sref Angularjs but my query is not for scope value in as parameter in data-ui-sref.

Upvotes: 0

Views: 348

Answers (1)

lenilsondc
lenilsondc

Reputation: 9800

ui-sref value is a scope expression. Therefore, you don't have to interpolate the scope value but pass it as if it was javascript with direct access to your scope like: <a data-ui-sref="app.admin({ startFrom: dateFrom, endTo: dateTo })">click</a>.

Upvotes: 1

Related Questions