angularjs - 将数据从一种状态传递到另一种状态

Question

现在我正在使用 UI-router 的状态进行导航，并使用 NG-repeat(在页面内)列出艺术家。当有人点击艺术家时，它会打开一个模态视图，其中包含更多详细信息和简介。

模态从 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>

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

我查看了网络上的一些文档和文章，得到了部分答案，所以很明显我下面的代码没有按预期工作。艺术家页面打开但没有传递任何内容，因为我得到一个只有按钮的屏幕。控制台确实将 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;
              });
          }]
      }
  })

Controller

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}} 绑定(bind)，例如...我缺少什么？

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

Answer 1

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

的 url

标记

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

更新

要从 $stateParams 传递多个参数，首先您需要在 $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;
      }
  });

上述解决方案会起作用，但我认为您的做法不够好。更好的方法是创建一个服务来跟踪所有参数。