How to update href with data-ui-state/data-ui-state-params from ui-router

Question

I have a list of objects from which I pass parameters to a state. The links(href) are properly created, but when I change the list, the old hrefs remain instead of generating new values.

<ul>
  <li data-ui-sref-active="active" data-ng-repeat="location in locations track by $index">

    <a data-ui-state="'.map.location'" data-ui-state-params="{ 'descriptor': '{{location.descriptor}}'}">

      {{location.descriptor}}
    </a>

</ul>
<button ng-click="changeList()">change list</button>

and the controller:

var app = angular.module('plunker', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

        // route for the home page
        .state('map', {
            url:'/map',
            templateUrl:'map.html'
        })

        .state('map.location', {
            url:'/location/{descriptor}',
            templateUrl:'map.html'
        })

    $urlRouterProvider.otherwise('/map');
});


app.controller('MainCtrl', function($scope) {

   $scope.locations = [{
     descriptor: "1"
   },{
     descriptor: "2"
   },{
     descriptor: "3"
   },{
     descriptor: "4"
   },{
     descriptor: "5"
   }];

  $scope.changeList = function(){

  $scope.locations = [{
       descriptor: "A"
     },{
       descriptor: "B"
     },{
       descriptor: "C"
     }];
  }

 });

Full code here: http://plnkr.co/edit/s4W3Qa0w37LO7HnwAZbH

Refer this: http://stackoverflow.com/questions/29849293/ng-repeat-not-updating-on-update-of-array — Prerak Sola, May 06 '17 at 15:21
The data on the view updates correctly, including data-ui-state and data-ui-state-params, only href doesn't change. — iulia zidaru, May 07 '17 at 10:59

score 0 · Answer 1 · answered May 07 '17 at 12:22

I made a hack inspired by this thread: https://www.reddit.com/r/angularjs/comments/351mg3/uisref_issue_href_wont_update_uisref_does/

app.directive('paramSref', function($compile, $state) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function(){return element.attr('param-sref');},function(newV, oldV) {
        if (newV !== oldV) {
          attrs.$set('href', $state.href('map.location', eval('(' + newV + ')')));
        }
      });
    }
  };
});

in index:

<a ui-sref=".map.location({ 'descriptor': '{{location.descriptor}}'})"
   param-sref="{ 'descriptor': '{{location.descriptor}}'}">

How to update href with data-ui-state/data-ui-state-params from ui-router

1 Answers1