Question

我有一个对象列表，我将参数传递给某个状态。链接（href）已正确创建，但是当我更改列表时，旧的href保留而不是生成新值。

<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>

和控制器：

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"
     }];
  }

 });

此处的完整代码：http://plnkr.co/edit/s4W3Qa0w37LO7HnwAZbH

Answer 1

我受到了这个帖子的启发：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 + ')')));
        }
      });
    }
  };
});

索引中的

：

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

如何使用ui-router中的data-ui-state / data-ui-state-params更新href

1 个答案: