1

私はangular（および意欲的なジュニア開発者）が初めてで、ui-routerのui-srefを取得してhrefを生成できません。

コードはきれいではありませんが、.state('names.new') がなくても機能します。私は .state('names') から .state('names.medals') にうまくいきました。すべてがエクスプレス/モンゴを介してスムーズに取得および入力されます。

目標は、単純な form.html ページである「/#/names/:names/new」にユーザーを誘導する ui-sref を使用してアンカー タグを作成することです。

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

ここに私の州があります：

"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>

この問題を解決するために必要なすべてを提供できたことを願っています。

angularのドキュメントとウォークスルーをかなり読んだ後でも、 $scope 、コントローラー、およびプロパティ/サービスをある状態から別の状態に渡す方法、および/または親/祖父母の状態から継承する方法について根本的な誤解があると思います。

私が成長するのに役立つリソース (記事、コース、ビデオ、チュートリアル、プロジェクト、書籍) をお持ちの場合は、大いに感謝します。

助けてくれてどうもありがとう！

4

1 に答える 1