Question

我是角色（和有抱负的初级开发者）的新手，我无法获得ui-router的ui-sref来生成href。

代码不漂亮，但没有.state（'names.new'）。我从.state（'names'）到.state（'names.medals'）很好。一切都通过express / mongo平稳地检索和填充。

目标是使用ui-sref创建一个锚标记，将用户引导到'/＃/ names /：names / new'，这是一个简单的form.html页面。

（注意：此版本主要基于CodeSchool的教程/ repo：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，控制器以及属性/服务如何从一个状态传递到另一个状态和/或从父/祖父母状态继承有一个基本的误解

如果你有资源（文章，课程，视频，教程，项目，书籍）可以帮助我成长，我会非常感激他们。

非常感谢你的帮助！

Answer 1

将{{}}添加到ui-sref：

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

AngularJs ui-router ui-sref不使用参数从嵌套状态生成href

1 个答案: