UI-具有主从模式的路由器 $stateParams

Question

我的网站需要一个主细节模式。在索引中有很多缩略图和每个缩略图 link 到它们的详细页面。我取得了进步，但没有开始工作。它在索引 oage 上加载缩略图，但是当我单击缩略图时，它会加载空白页。

索引：

<body ui-view="viewA">
<div class="row" ui-view="viewB">
        <div class="col s12 m6 l4" ng-repeat = "manga in mangas">
        <div class="row">
        <div class="col s5">
            <a ui-sref="icerikDetails({id:manga.id})" class="thumbnail">
            <img src="/kapaklar/{{manga.kapak}}">
</a>

JS:

angular.module('nasuh',["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('index', {
   url: "/",
   views: {
   "viewA": { templateUrl: "index.html",
            controller: "indexCtrl",}
}})
$stateProvider
.state('icerik', {
   url: "/icerik",
   views: {
        "viewB": { templateUrl: "icerik.html",
                   controller: "mmgCtrl",},
}})
$stateProvider
.state('icerikDetails', {
    url: "/icerik/:id",
    template: "<div>{{details }}</div>",
    controller: "mmgCtrl",
    resolve: {
             getData : function(MY, $stateParams, $filter){
             return MY.isimler.then(function(res){
             return $filter('filter')(res.data, {id: $stateParams.id}, true)[0];
});}
}
})
$urlRouterProvider.otherwise("/");
})

工厂和控制器：

.factory('MY', function($http){
 var factory = {};
 var url = '/uzak/remote.php?callback=JSON_CALLBACK';
 factory.isimler = $http.get(url);
 return factory;
})
.controller('indexCtrl', function($scope, MY) {
     MY.isimler.success(function(alHemen){
          $scope.mangas = alHemen;
     });  
 })
.controller('mmgCtrl', function($scope, getData) {
 $scope.manga = getData.then(function(data){
   $scope.details = data;
 });})

Answer 1

我不确定你想要达到什么目的，但至少我试着将你的片段转换成有用的东西。

有a working example

要获得更多理解，请阅读以下内容：

Nested States and Nested Views

Multiple Named Views

这些是具有层次结构的状态。 Index是super root, details是super child:

$stateProvider
    .state('index', {
      url: "/",
      views: {
        "": {
          templateUrl: "index.tpl.html",
          controller: "indexCtrl",
        }
      }
    })
    .state('icerik', {
      parent: "index",
      url: "^/icerik",
      views: {
        "viewA": {
          templateUrl: "icerik.html",
          controller: "indexCtrl",
        },
      }
    })
    .state('icerik.icerikDetails', {
      url: "/icerik/:id",
      template: "<div>{{manga}}</div>",
      controller: "mmgCtrl",
      resolve: {
        getData: function(MY, $stateParams, $filter) {
          return MY.isimler.then(function(res) {
            return $filter('filter')(res.data, {
              id: $stateParams.id
            }, true)[0];
          });
        }
      }
    })
  $urlRouterProvider.otherwise("/");

这些将是新的控制器和工厂：

.factory('MY', function($http) {
    var factory = {};
    //var url = '/uzak/remote.php?callback=JSON_CALLBACK';
    var url = 'data.json';
    factory.isimler = $http.get(url);
    return factory;
})
.controller('indexCtrl', function($scope, MY) {
    MY.isimler.success(function(alHemen) {
      $scope.mangas = alHemen;
    });
})
.controller('mmgCtrl', function($scope, getData) {
    //$scope.manga = getData.then(function(data){
    //   $scope.details = data;
    // });
    $scope.manga = getData;
})

以及模板示例"index.tpl.html"：

<div >
  <h2>  this is index view</h2>
  <a href="#/icerik">icerik</a>

    <div ui-view="viewA"></div>    
</div>

和"icerik.html"：

<div class="row" >
        <div class="col s12 m6 l4" ng-repeat="manga in mangas">
        <div class="row">
        <div class="col s5">
            <a ui-sref="icerik.icerikDetails({id:manga.id})" class="thumbnail">
            img src="/kapaklar/{{manga.kapak}}" 
            </a>
  </div>
  </div>
  </div>

  <hr>
  <div ui-view=""></div> 
</div>

检查一下here

UI-具有主从模式的路由器 $stateParams

UI-Router $stateParams With Master Detail Pattern

javascript

state

nested

angularjs

angular-ui-router

Nested States and Nested Views

Multiple Named Views