AngularJS用户界面路由器的麻烦和链接从一个控制器的ID到另一个

我最初有我的应用程序与ng路由设置，我现在切换到UI路由。我曾经使用“when（'/ json/galleries /：projectId'）”在单击缩略图时生成一个图库。现在与“状态”我似乎无法如何将我的projectId通过画廊状态生成我的画廊。AngularJS用户界面路由器的麻烦和链接从一个控制器的ID到另一个

APP模块

(function() { 
    'use strict'; 

    var bhamDesignsApp = angular.module('bhamDesignsApp', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'mm.foundation', 'appControllers']); 

    bhamDesignsApp.config(function($stateProvider, $urlRouterProvider) { 

     $urlRouterProvider.otherwise('/home'); 

     $stateProvider 

     .state('home', { 
      url: '/home', 
      templateUrl: 'partials/home.html', 
      controller: 'ProjectsController' 
      }) 

     .state('gallery', { 
      url: '/gallery/:projectId', 
      templateUrl: 'partials/gallery.html', 
      controller: 'GalleryController' 
     }); 
     }); 
})();

应用控制器

(function() { 

'use strict'; 

var appControllers = angular.module('appControllers', []); 

appControllers.controller('ProjectsController', ['$scope', '$http', 
    function ($scope, $http) { 
    $http.get('app/json/projects.json').success(function(data){ 
    $scope.projects = data; 
    }); 

    $scope.orderProp = '-year'; 

}]); 

appControllers.controller('GalleryController', ['$scope', '$stateParams', '$http', 
    function($scope, $stateParams, $http) { 
    $http.get('app/json/galleries/' + $stateParams.projectId + '.json').success(function(data) { 
     $scope.gallery = data; 
    }); 
}]); 

})();

HTML

.row 
    .small-12.medium-3.columns(ng-repeat="project in projects | orderBy:orderProp | filter:categoryFilter") 
    .tmbnail-container  
     a(ui-sref="gallery") 
     img.tmbnail(ng-src="{{project.thumbnail}}") 
     .text 
      h5 {{project.title}} 
      h6 {{project.year}} 
    .small-12.medium-6.columns

来源

2016-02-28 Jleibham

a(ui-sref="gallery")

您没有任何ID传递给状态。

将其更改为

a(ui-sref="gallery({projectId: project.id})"

（假定项目有一个id领域保持其ID）

文件，说明如何使用的用户界面，SREF：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref

来源

2016-02-28 16:11:25

功效神奇！我想我最初有画廊（{projectId：}），但它不会工作，因为我错过了第二部分。感谢您的帮助，现在阅读文档并找出这种神秘主义是如何工作的。 – Jleibham

AngularJS用户界面路由器的麻烦和链接从一个控制器的ID到另一个

回答

相关问题