Question

这是index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>index</title>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="icon" href="data:;base64,=">
        <style>
        </style>

</head>

<body>
        <ul class="papa">

                <li><a href="/1_input">input</a></li>
                <li><a href="/2_output">output</a></li>
        </ul>

        <ng-view></ng-view>

        <script>

                var app1 = angular.module('myApp', ['ngRoute']);
                app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
                        $routeProvider
                        .when('/1_input', {
                          controller: 'input_control',
                          templateUrl: '/1_input.html'
                   })
                        .when('/2_output/:firstnamehh/:lastnamehh', {
                          controller: 'output_control',
                          templateUrl: '/2_output.html'
                        })
                        .otherwise({redirectTo:'/1_input'});

                        $locationProvider.html5Mode({ enabled: true, requireBase: false });
                }]);

                app1.controller('input_control',function($scope, $location){
                        //$scope.init_table = {name1:"", name2:""};
                        //$scope.score_card = [];
                        //
                        $scope.loadView2 = function(){
                                // $scope.score_card.push({
                                //          name1: $scope.firstnamehh,
                                //          name2: $scope.lastnamehh
                                // })
                                // console.log($scope.score_card);
              $location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
                        //$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
                        //$location.path('/2_output/'+$scope.score_card;
                        //$location.path('/2_output/'+$scope.firstnamehh+$scope.lastnamehh+$scope.score_card);
                        //$location.path('/2_output/'+$scope.score_card);
            }
                });

                app1.controller('output_control',function($scope, $routeParams){
                         $scope.name1=$routeParams.firstnamehh;
                         $scope.name2=$routeParams.lastnamehh;
                         //$scope.name2=$routeParams.({?name1=$scope.firstnamehh});
                         //$scope.out_score=$routeParams.score_card;
                         //$scope.name3 = $routeParams[score_card];
                });

        </script>
</body>
</html>

这是1_input.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>1_input</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
        First name: <input type="text" ng-model="firstnamehh"/> <br/>
        Last name: <input type="text" ng-model="lastnamehh"/> <br/>
        <button ng-click="loadView2()">to output page</button>
</body>
</html>

这是2_output.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2_output</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
    From View2.
    <ul>
        <li>{{name1}}</li>
        <li>{{name2}}</li>
        <!-- <tr ng-repeat="aa in score_card">
            <td>{{aa.name1}}</td>
            <td>{{aa.name2}}</td>
        </tr> -->
    </ul>
</body>
</html>

大家好，我是angularjs的新手并寻求帮助！我正在尝试的是，将firstnamehh和lastnamehh作为列表并将其传递给2_output.html，最后将其打印在表格中。我正在努力的部分是我应该在$ routeParams和$ location.path（）之后放置。

$routeParams.???

...

$location.path('/2_output/'+$scope.???);

任何建议将不胜感激！谢谢你阅读这个问题

Answer 1

您可以使用服务

来实现此目的

app.factory('DataService', function() {
    var appData = {}

    function set(data) {
        appData = data;
    }

    function get() {
        return appData;
    }

    return {
        set: set,
        get: get
    }

}

在input_control中，您可以将数据设置为服务：

DataService.set(shredData);

在你的output_control中获取来自其他服务的数据：

$scope.appdata = DataService.get();

通过将控制器作为参数

传递给控制器中的DataService

app.controller('input_control', ['DataService', function($scope, $location, DataService){
      //Your logic  
}]);

angularjs - 我如何将列表传递给其他HTML？

1 个答案: