问题描述
参照Phonecat做的菜谱网站，在做路由的时候出了些问题，json数据不能显示在模板上。
//设置路由angular. module(’recipeApp’). config([’$locationProvider’, ’$routeProvider’, function config($locationProvider, $routeProvider) { $locationProvider.hashPrefix(’!’); $routeProvider.when(’/data’, { template: ’<recipe-list></recipe-list>’}).when(’/data/:recipeId’, { template: ’<recipe-detail></recipe-detail>’}).otherwise(’/data’);} ]);
这个调用recipe-list是没问题的
//这个是模仿原版做的对HTTP封装angular. module(’recipequery’). factory(’Recipe’, [’$resource’, function($resource) { return $resource(’data/:recipeId.json’, {}, {query: { method: ’GET’, params: {recipeId: ’recipes’}, isArray: true} });} ]);
在recipe-list里调用的.query没有出问题
//这是注册recipedetail组件angular. module(’recipeDetail’). component(’recipeDetail’,{templateUrl: ’recipe-detail/recipe-detail-template.html’,controller: [’$routeParams’, ’Recipe’, function RecipeDetailController($routeParams, Recipe) {this.recipe = Recipe.get({recipeId: $routeParams.recipeId});} ] });
这里我和原版有些不一样，放弃了他的切换图片功能，这里我就瞎改了下，结果就是模板dom里的字都能看到，需要调取的json数据全没有，附上我的模板：
//recipe-detail-template.html<p class='detail-container container-fluid'> <p class='banner'><i><img ng-src='https://www.6hehe.com/wenda/{{$ctrl.recipe.imageUrl}}'/></i><p class='comment'> <h2>{{$ctrl.recipe.name}}</h2> <span>'</span><p>{{$ctrl.recipe.comment}}</p><span>'</span></p> </p> <p class='ingredient'><h3>Ingredients</h3><ul> <li ng-repeat='(x,y) in $ctrl.recipe.ingredients'>{{x}}<span>{{y}}</span> </li></ul> </p> <p class='step'><h3>Steps</h3><ol ng-repeat='step in $ctrl.recipe.step'> {{step}}</ol> </p></p>
问题解答
回答1：自问自答小王子. 是json格式出错，突然对这个自己提的问题感到很羞耻
