2016-11-04 8 views
1

私は新しい(と意欲的なジュニア開発者)、新しいですし、hrefを生成するui-routerのui-srefを取得できません。AngularJs ui-router ui-srefは、パラメータがネストされた状態からhrefを生成しません。

コードはきれいではありませんが、.state( 'names.new')なしで動作します。 .state( 'names')から.state( 'names.medals')までうまくいきます。明示的/黙示的にすべてを取得してスムーズに移入します。

目的は単純なform.htmlページである '/#/ names /:names/new'にユーザーを誘導するui-srefでアンカータグを作成することです。

(注:このビルドは大きく、ここでCodeSchoolのチュートリアル/レポに基づいています。https://github.com/codeschool/OlympicsMEAN)ここ

は私の状態です:

"use strict"; 

var angular = require('angular'); 
var uiRouter = require('angular-ui-router'); 

var app = angular.module('showNames', ["ui.router"]); 

app.config(function($stateProvider, $urlRouterProvider){ 
    //Default page load 
    $urlRouterProvider.otherwise('/names'); 

    //States        
    $stateProvider 
     .state('names', { 
      url:'/names', 
      templateUrl:'views/namesNav.html', 
      resolve: { 
       namesProvider: function ($http){ 
        return $http.get('/names'); 
        } 
       }, 
      controller: 'namesController' 
     }) 

     .state('names.medals', { 
      url: '/:names', 
      templateUrl: 'views/namesName.html', 
      resolve: { 
       nameService: function($http, $stateParams){ 
        return $http.get('/names/' + $stateParams.names); 
       } 
      }, 
      controller: 'athleteController' 
     }) 

     .state('names.new', { 
      url: '/:names/new', 
      templateUrl: 'views/newMedals.html', 
      controller: 'newMedalCtrl' 
     }) 
}); 

そして、ここでは私のコントローラは、次のとおりです。

app.controller('namesController', ['namesProvider', '$scope', function(namesProvider, $scope) {  
     $scope.names = namesProvider.data; 
}]); 

app.controller('athleteController', ['nameService', '$scope', function(nameService, $scope) { 
     $scope.athlete = nameService.data; 
}]); 

app.controller('newMedalCtrl', ['$stateParams', '$scope', function($scope, $stateParams) { 
     $scope.urlParamVal = $stateParams.names 
}]); 

参照のために、この.jsonオブジェクトは.state( 'names')の解決されたGET要求から返されます。

戻りオブジェクト:ここ

{ 
    "name": "Michael Phelps", 
    "goldMedals": [{ 
     "Year" : 2012, 
     "Event" : "400m-Fly", 
     "Location" : "London, England" 
     }, { 
     "Year" : 2012, 
     "Event" : "200m-Fly", 
     "Location" : "London, England" 
     }, { 
     "Year" : 2016, 
     "Event" : "200m-Breast Stroke", 
     "Location" : "Rio de Janeiro, Brazil" 
     }] 
    } 

は私のテンプレートです:

/views/namesNav.html:

<ul>   
     <li ng-repeat="name in names"> 
//this anchor tag works just fine 
     <a ui-sref="names.medals({name : name})"> {{ name }}</a> 
    </li> 
</ul> 

<div ui-view></div> 

/views/namesName.html:

<h3>{{athlete.name}}'s Gold Medals</h3> 

<table class="table"> 
    <thead> 
     <th> Event </th> 
     <th> Year  </th> 
     <th> Location </th> 
    </thead> 

    <tbody> 
     <tr ng-repeat="medal in athlete.goldMedals"> 
      <td>{{medal.Event}}</td> 
      <td>{{medal.Year}}</td> 
      <td>{{medal.Location}}</td> 
     </tr> 
    </tbody> 
</table> 


//This isn't generating anything 
<a ui-sref="names.new({names : urlParamVal})"> New Medal Form </a> 

この問題を解決するために必要なものをすべて提供していただきたいと思います。

角度のドキュメントやチュートリアルをかなり読んだ後でも、私は$ scope、コントローラー、プロパティ/サービスをある状態から別の状態に渡したり、親/祖父母から継承したりする基本的な誤解があると思います状態。

私が成長するのに役立つリソース(記事、コース、ビデオ、チュートリアル、プロジェクト、書籍)があれば、大変ありがとうございます。

ありがとうございました。

答えて

0

追加{{}}ui-srefへ:

<a ui-sref="names.new({names : {{urlParamVal}}})"> New Medal Form </a>