Ionic + Angular ui-sref not generating href

Question

I'm working on passing parameters in a url. As far as I know everything is setup correct to set the baseFilter url parameter with the vm.all property but every time I click the link nothing happens. I also inspected the generated html and I see a ui-sref and not a href tag. Any help is appreciated

router.js

(function () {
    'use strict';
    angular.module('app').config(routing);
    /* @ngInject */
    function routing($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home/home.html',
            controller: 'HomeContentController as vm'
    })

    .state('eventsList', {
        url: '/eventsList/:baseFilter',
        templateUrl: 'events-list/events-list.html',
        controller: 'EventsListController as vm'
    });
    $urlRouterProvider.otherwise('/home');
}
})();

This is the a tag in my home.html

   <a class="item" ui-sref="eventsList({baseFilter: vm.all})">

HomeController.js

(function () {
    'use strict';

    angular.module('app').controller('HomeContentController', HomeContentController);
/* @ngInject */
function HomeContentController($scope, $log, $ionicSideMenuDelegate, $ionicPopup, $state, rxEventsService, rxRequests, $cordovaGeolocation) {

    // Assign variable `vm` to `this` to reflect that this is a view-model.
    var vm = this;
    vm.all = "all";

        // Bindable Properties
        vm.promptUnavailable = promptUnavailable;

        // Controller Initialization
        function init() {
            console.log('init HomeContentController');
        }

        init();

        // Bindable Events
        function promptUnavailable(feature) {
            $ionicPopup.alert({
                title: 'Unavailable Feature',
                template: feature + ' is unavailable in this Alpha release'
            });
        }
    }
})();

Remove the href attribute. What controller scope is your <a> tag within, ie what is vm in that context? — Phil
– Phil, Commented May 12, 2016 at 3:49
@Phil I didn't realize I left the href in there. I was testing that the routing actually worked if I specific the full url manually. The scope is HomeContentController as vm — VirtualProdigy
– VirtualProdigy, Commented May 12, 2016 at 3:59

Aditya Singh · Accepted Answer · 2016-05-12 04:17:04Z

2

If you set the correct value of vm.all your code should work fine.

angular
.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeContentController as vm'
    })
    .state('eventsList', {
      url: '/eventsList/:baseFilter',
      templateUrl: 'events-list.html',
      controller: 'EventsListController as vm'
    });

  $urlRouterProvider.otherwise('/home');
})
.controller('HomeContentController', function () {
  var vm = this;
  vm.all = 1;

})
.controller('EventsListController', function ($stateParams) {
  var vm = this;
  console.log($stateParams);
});

I have created a JSBin using your code and it works fine. If you see the value logged in console log, it has correct value of $stateParams. https://jsbin.com/qebimeh/1/edit?html,js,console,output

answered May 12, 2016 at 4:17

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

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

1 Comment

VirtualProdigy Over a year ago

I have not clue why, but last night this would not work for the life of me. This morning it's working like a watch...3 hours of my life gone. Thank you so much for the help

Collectives™ on Stack Overflow

Ionic + Angular ui-sref not generating href

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