1

我是 Angular 的新手（也是一个有抱负的初级开发人员），我无法让 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>

我希望我已经提供了解决这个问题所需的一切。

即使在阅读了大量 Angular 的文档和演练之后，我认为我对 $scope、控制器以及属性/服务如何从一个状态传递到另一个状态和/或从父/祖父状态继承有一个根本的误解。

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

非常感谢你的帮忙！

4

1 回答 1

0

添加{{}}到ui-sref：

<a ui-sref="names.new({names : {{urlParamVal}}})"> New Medal Form </a>
于 2017-11-12T15:53:27.893 回答