Question

我知道这是一个构造不良的问题，但我不知道怎么回事。

我是AngularJS的新手，我试图基本上说“如果用户点击”这个“个人资料”，请转到/models/{{ model.id }}，其中model.id是被点击的“此”个人资料的值

基本上，main.html只有一些信息（如果你愿意，只有一个片段），当点击一个配置文件时，它应该转到/models/{{ model.id }}，然后显示完整的配置文件，而不仅仅是一个片段。

到目前为止，我已经开始工作，因为当悬停配置文件链接时它会显示正确的ID，并且使用正确的url参数转到正确的视图，但是如何在视图中写入数据，使得数据是否与点击的ID相关？我通常用PHP / Laravel和MySQL来做这个，但我想用Angular来试试。

app.js：

'use strict';

angular
    .module('swoleincApp', [
        'ngRoute',
        'ngSanitize',
        'ngAnimate'
    ])
    .config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/models', {
                    templateUrl: 'views/main.html',
                    controller: 'MainCtrl'
                })
                .when('/models/:id', {
                    templateUrl: 'views/individual.html',
                    controller: 'MainCtrl'
                })
                .otherwise({
                    redirectTo: '/models'
                });

            $locationProvider.html5Mode(true);
        }]);

MainCtrl.js：

'use strict';

angular
    .module('swoleincApp')
    .controller('MainCtrl', ['$scope', '$http', MainCtrl]);

function MainCtrl($scope, $http) {
    $http.get('storage/models.json').success(function(data) {
        $scope.models = data;
    });
}

main.html中：

<div class="model-container" ng-repeat="model in models">
        <a href="/models/{{ model.id }}">
            <div class="row">
                <div class="col-sm-2">
                    <div class="model-profile-image">
                        <img ng-src="{{ model.profileImage }}" width="100" height="100">
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="model-stats">
                        <h3>{{ model.name }}, {{ model.age }}, {{ model.height }}, {{ model.weight }}.</h3>
                    </div>
                    <div class="model-motto">
                        <p>{{ model.motto }}</p>
                    </div>
                </div>
            </div>
        </a>
    </div>

models.json（假装“其他内容”适用于各个个人资料）：

{
    "1": {
        "id": "1",
        "profileImage": "../img/dom.jpg",
        "name": "Dom",
        "age": "19",
        "height": "6'2",
        "weight": "170lbs",
        "motto": "My name is dom and I'm a 19 year old bodybuilder from Russia.",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
    },
    "2": {
        "id": "2",
        "profileImage": "../img/Tom.jpg",
        "name": "Tom",
        "age": "21",
        "height": "5'8",
        "weight": "190lbs",
        "motto": "I'm Tom. Everyone knows my name. Everyone knows my game.",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
    }
}

Answer 1

使用其他控制器来简化此操作。可以使用注入控制器的:id访问参数$routeParams。

angular
    .module('swoleincApp')
    .controller('ProfileCtrl', ['$scope', '$http','$routeParams', ProfileCtrl]);


function ProfileCtrl($scope, $http, $routeParams) {
    $http.get('storage/models.json').success(function(data) {
        $scope.profile= data[$routeParams.id];
    });
}

请务必更新此控制器的路由配置。

通常，您将创建一个服务来处理检索数据并存储它。暂时离开$http以保持简单。

建议通过文档站点上的phoneCat教程。这是link to the routing section

Answer 2

您需要做的就是使用$RouteParams服务。 AngularJS官方网站上的Here's the documentation

AngularJS：路由到/ page /：id并显示id的信息？

2 个答案: