Javascript AngularJs ui路由器ui sref未使用参数从嵌套状态生成href

我是angular的新手（也是一个有抱负的初级开发人员），我无法让ui路由器的ui sref生成href

代码并不漂亮，但是它在没有.state（'names.new'）的情况下工作。我从.state（'names'）到.state（'names.emdages'）很好。所有内容均通过express/mongo顺利检索和填充

目标是使用ui sref创建一个锚定标记，该标记将引导用户访问“/#/names/：names/new”，这是一个简单的form.html页面

（注意：此构建在很大程度上基于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'
        })
});

   {
    "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" 
        }]
    }

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

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

这是我的控制器：

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请求返回的

返回对象：

"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'
        })
});

   {
    "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" 
        }]
    }

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

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

以下是我的模板：

/views/namesNav.html:

"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'
        })
});

   {
    "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" 
        }]
    }

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

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

//这个锚定标签很好用
{{name}}

/views/namesName.html:

"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'
        })
});

   {
    "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" 
        }]
    }

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

<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、controllers以及如何将属性/服务从一个状态传递到另一个状态和/或从父/祖父母状态继承有一个基本的误解

如果你有能帮助我成长的资源（文章、课程、视频、教程、项目、书籍），我将不胜感激

---

非常感谢你的帮助

将

{{}

添加到

ui-sref

：

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

新奖牌形式

将

{{}

添加到

ui-sref

：

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

新奖牌形式