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到另一個

回答

相關問題