The href doesn't refresh when the ui-sref changes

Question

I have an issue with angular. I have this code in my template :

<select class="form-control"
  ng-model="hiveReports.reportSelected"
  ng-options="link for link in hiveReports.reportsLink"
  ui-sref="dashboard.hive-reports.{{hiveReports.reportSelected}}">
</select>

and the code behind like this :

.config(['$stateProvider', function ($stateProvider) {
      $stateProvider
          .state('dashboard.hive-reports', {
              url: '/hive-reports',
              template: require('./hiveReports.tmpl.html'),
              abstract: true,
              controller: 'HiveReportsCtrl as hiveReports'
          });
  }])
  .controller('HiveReportsCtrl', [
      '$rootScope',
      '$state',
      function ($rootScope,
                $state) {

          var controller = this;
          controller.reportSelected = 'transactions';
          controller.reportsLink = ['transactions','devices'];
      }])

It create a select and switch the state when I select an option.

In another template, it works fine but I have a parameter in the link like this

<select class="form-control"
  ng-model="hiveProfile.selectedProfile "
  ng-options="profile.id as profile.name for profile in hiveProfile.profile"
  ui-sref="dashboard.hive-profile.profile({profileId:hiveProfile.selectedProfile })">
</select>

I think the dashboard.hive-project.profile() trigger an event which refresh the href but without param, it doesn't work. I have tried a lot of possibilities but nothing work. Trying to trigger an event in the angular directive like that

ui-sref="dashboard.hive-reports.{{hiveReports.reportSelected}}()">

or

ui-sref="dashboard.hive-reports.{{hiveReports.reportSelected}}({})">

Any ideas to fix my problem?

Answer 1

I don't think you can use template tags like that in the ui-sref . I think you need to create a state and pass the dynamic reportSelected in like you did with the profile one.

$stateProvider
    .state('dashboard.hive-reports', {
        url: '/hive-reports',
        template: require('./hiveReports.tmpl.html'),
        abstract: true,
        controller: 'HiveReportsCtrl as hiveReports'
    })
    .state('dashboard.hive-reports.report', {
        url: '/{report}',
        template: require('./hiveReportsReport.tmpl.html'),
        controller: 'HiveReportsReportCtrl as hiveReportsReport'
    });

<select class="form-control"
  ng-model="hiveReports.reportSelected"
  ng-options="link for link in hiveReports.reportsLink"
  ui-sref="dashboard.hive-reports.report({report: hiveReports.reportSelected})">
</select>