Question

现在我正在使用UI路由器的状态进行导航和NG重复（在页面内）列出艺术家。当有人点击艺术家时，它会打开一个包含更多细节和生物的模态视图。

模态从NG-repeat和Index ...

获取数据

<div id="{{$index}}" aria-hidden="true" role="dialog" tabindex="-1" class="portfolio-modal modal fade">
<div class="col-lg-12">
                <h2>{{artistesItem.name}}</h2>
                <hr class="star-primary"/>
              </div>

我想要做的是将艺术家数据传递到另一个页面，在那里我们可以获得艺术家个人的完整网址路径，以便有人可以链接到此。

我已经在网上查看了几篇文档和文章，我已经得到了部分答案，所以很明显我的代码下面没有按预期工作。艺术家页面打开但没有传递任何内容，因为我得到一个只有按钮的屏幕。控制台确实提到ID未定义，但URL确实显示正确的ID？

国家

  .state('artistView', {
      url: 'musique/{id}',
      views: {
          '':{ templateUrls: 'index.html'},
          'navbar' : { templateUrl: 'views/navbar.html'},
          'artist' : { templateUrl: 'views/artist.html'},
          'footer': { templateUrl: 'views/footer.html'}
      },
      controller: 'ViewOneArtist',
      resolve: {
          artistView: ['$http', '$stateParams', function($http, $stateParams) {
              return $http.get($stateParams.id).then(function(data) {
                  return data.data;
              });
          }]
      }
  })

控制器

app.controller('ViewOneArtist', function($scope, $http, $resource, artistesUrl, baseUrl) {

$scope.artistesItemsResource = $resource(baseUrl + artistesUrl + ":id", {id: "@id"},
    { create : { method: "POST"}, save: { method: "PUT"}}
);

$scope.id = id;

$scope.listOneArtiste = function(id) {

    $scope.artistesItems = $scope.artistesItemsResource.get(id);
};

$scope.listOneArtiste(id);

});

传递数据的HTML链接。然后在HTML页面上我与{{image}}绑定，例如......我缺少什么？

 <a ui-sref="artistView({id: artistesItem.id})">Click TEST</a>

Answer 1

ui-serf不应该使用插值指令，因为你想将id参数传递给路由，你应该在json中传递该参数，如{id: artistItem.id}，这将创建href属性＆amp;将包含id

的网址

<强>标记

<a ui-sref="artistView({id: artistItem.id})">Click TEST</a>

<强>更新

要从$stateParams 1st传递多个参数，您需要在$state定义中注册每个参数

 .state('artistView', {
      url: 'musique/{name}',
      views: {
          '':{ templateUrls: 'index.html'},
          'navbar' : { templateUrl: 'views/navbar.html'},
          'artist' : { templateUrl: 'views/artist.html'},
          'footer': { templateUrl: 'views/footer.html'}
      },
      parmas: {
          'name': {value: null}, //set value it default to null if not passed
          'bio': {value: null},
          'image': {value: null},
          'facebook': {value: null},
          'twitter': {value: null},
          'instagram': {value: null},
          'googleplus': {value: null},
          'site': {value: null},
          'nextEvent': {value: null},
          'devisTechnique': {value: null},
          'video': {value: null},
          'authorized': {value: null},
          'exclusif': {value: null}
      },
      controller: function($scope, $stateParams) {
          //pass URL
          $scope.name = $stateParams.name;
          //pass data for artist page
          $scope.bio = $stateParams.bio;
          $scope.image = $stateParams.image;
          $scope.facebook = $stateParams.facebook;
          $scope.twitter = $stateParams.twitter;
          $scope.instagram = $stateParams.instagram;
          $scope.googleplus = $stateParams.googleplus;
          $scope.site = $stateParams.site;
          $scope.nextEvent = $stateParams.nextEvent;
          $scope.devisTechnique = $stateParams.devisTechnique;
          $scope.video = $stateParams.video;
          $scope.authorized = $stateParams.authorized;
          $scope.exclusif = $stateParams.exclusif;
      }
  });

以上解决方案可行，但我不认为你做得好的方式。 Better Approach将创建一个服务，跟踪所有参数。

将数据从一个州传递到另一个州

1 个答案: