Nested Views with Dynamic Id's Angular & Rails
Nested Views with Dynamic Id's Angular & Rails
嘿,我让 Angular 将报价列表渲染为资源。报价存储在导轨后端。我想使用 Angular 来渲染节目.html用于该特定报价资源。
我一直无法解决状态。我不确定我是否了解如何将 id 传递到状态中。我需要帮助弄清楚如何使角度来渲染节目.html在标记为"fullquote"的 ui-view 中用于特定报价。这是我的代码。
行情.html
<div class="quotes col-xs-10 col-md-8" ng-controller="QuotesCtrl" >
<div ng-repeat="quote in quotes">
<a ng-click="showQuote(quote);">
<span ng-if="quote.read == false"> *NEW*</span>
<span>Quote id: {{quote.id}}</span>
<span>Name: {{quote.name}}</span>
<span>Email: {{quote.email}}</span>
<span>City: {{quote.city}}</span>
<span>Region: {{quote.region}}</span>
<span>State: {{quote.state}}</span>
</a>
<div ng-show="quote.visible">
<a ui-sref="quotes/{{quote.id}}"> View </a>
<ui-view="fullquote"></ui-view="fullquote">
<a ng-click="quotes.splice($index, 1)"> Delete </a>
<div ng-if"">
<span> {{quote.question2 }}</span>
<span> {{quote.question3 }}</span>
<span> {{quote.question4 }}</span>
<span> {{quote.question5 }}</span>
<span> {{quote.question6 }}</span>
<span> {{quote.question7 }}</span>
<span> {{quote.question8 }}</span>
<span> {{quote.question9 }}</span>
<span> {{quote.question10 }}</span>
<span> {{quote.question11 }}</span>
<span> {{quote.question12 }}</span>
<span> {{quote.question13}}</span>
</div>
</div>
</div>
</div>
行情.js
app.factory('Quotes', ['$resource',function($resource){
return $resource('/quotes.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
app.factory('Quote', ['$resource', function($resource){
return $resource('/quotes/:id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
});
}]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', { url: '', templateUrl: 'static_pages/home.html'})
.state('quotes', { url: '/quotes', abstract: false, views : { templateUrl: 'quotes.html', controller: 'QuotesCtrl'}})
.state('quotes/:id', { url: 'quotes/:id', view: { "fullquote": { templateUrl: 'show.html', controller: 'QuotesCtrl'}}})
.state('quotes/:id.pdf', { url: 'quotes/:id.pdf', controller: 'QuotesCtrl'})
.state('users', { url: '/users', templateUrl: 'users.html', controller: 'UsersCtrl'})
.state('/users/:id', { url: 'users_show.html', controller: "UsersCtrl" });
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("home");
})
$locationProvider.html5Mode({ enabled: true, requireBase: false });
});
app.controller("QuotesCtrl", ['$scope', '$state', '$http', 'Quotes', 'Quote', '$location', function($scope, $state, $http, Quotes, Quote, $location ) {
$scope.quotes = Quotes.query();
$scope.quote = Quote.query();
$scope.showQuote = function (quote) {
quote.visible = !quote.visible;
}
}]);
您应该研究以下几点:
-
您的州命名不正确。我假设您正在尝试使用嵌套状态。在这种情况下,您需要
.quotes.detail
或类似的东西。 此外,在状态下,您需要将对象命名为views
而不是view
。请参考用户界面。路由器多视图指南了解更多信息。state('quotes.detail', { 网址: 'quotes/:id', 浏览次数: { "完整引用": { 模板网址: '显示.html', 控制器:"引号控制"} } })
-
要将参数传递给状态,您需要更改指向此状态的链接。如果您想了解有关将参数传递给ui.router状态的更多信息 - 请阅读手册:
<a ui-sref="quotes.detail({{quote.id}})"> View </a>
-
如果要有一个单独的视图,还需要有单独的控制器。我把它命名为
QuoteController
。您可以通过在控制器中注入$stateParams
来从 URL 获取 ht:id
。有关将参数导入控制器的详细信息 - 此处://QuoteController ['$stateParams, Quote , function($stateParams, Quote) { Quoute.get({id:$stateParams.id}); }]
我不确定这会完全解决你的问题,但它肯定会让你更接近解决它。我希望我有帮助!
- Angular JS IE9 Hashbang url rewriting
- 如何使用skip参数使用angular ui引导进行服务器端分页
- jquery点击函数select&取消选择
- Angular js-返回一个包含类似
- 如何将Angular 2用于各种网站&使用PHP作为后端的模块
- Angular UI&引导程序:点击链接时折叠移动导航栏
- CSS选择器在Angular单元测试w/karma&柴
- ASP.NET MVC&Angular:会话到期后,Angular Factory返回登录页面的HTML,而不是
- ASP.NET MVC&Angular:当会话Cookie过期时,自定义属性/ActionFilter,希望它重
- 上传表单数据&图像使用Angular JS和Cordova
- Ionic&Angular JS表单验证在占位符中显示消息
- Angular&ASP.NET MVC-当后端接收到参数时,该参数为null
- Angular:自定义事件处理程序的顺序&默认处理程序
- 具有多个视图的angular ui路由器状态&控制器实例化
- angular.js&基础5手风琴
- angular js模块&架构设计:multiple index.html
- 如何将两个指令结合使用-angular translate&角截形
- Angular JS&TypeScript-错误:ng:areq错误参数"自变量'XXXXXX
- Angular&高图表.通过程序将状态设置为悬停
- 在单行中声明多个变量+Angular 2&TypeScript