Question

我想要做的是从我的家庭应用程序传递到列表。我有不同.js文件的列表和我的家，但现在，我怎么能首先显示我的家，然后，只需点击一下，发送到列表？

我的档案，接下来。首先是家庭代码和视图：

家庭component.js

(function(){
     'use strict';
    var home = {
        templateUrl: './app/components/list-component/home-component/home.html',
        controller: homeCtrl
    };

    angular
    .module('payApp')
    .component('home', home);

    function homeCtrl(){

        var home = this;
    }  

    })();

home.html的

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="title">
                            <h3><strong>¡Welcome!</strong></h3>
                        </div>
                        <br>
                        <div class="col-md-6 .col-md-offset-3">
                            <button class="btn btn-success" ng-click="">Start</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后，我的列表文件。

付款component.js

(function(){
     'use strict';
    var pays = {
        templateUrl: './app/components/list-component/paymentcompo.html',
        controller: payCtrl
    };

    angular
    .module('payApp')
    .component('payInvoice', pays);
    payCtrl.$inject = ["$scope"];
    function payCtrl($scope){

}
})();

这是html视图：

paymentcompo.html

<table class="table table-hover">
        <thead>
            <tr>
                <th>Payment Number</th>
                <th>Name</th>
                <th>Tax Id</th>
            </tr>
        </thead>
        <tbody>
            <tr id="pool" ng-repeat="info in list | filter: search">
                <th>{{info.Id}}</th>
                <th>{{info.name}}</th>
                <th>{{info.taxId}}</th>
            </tr>
        </tbody>
    </table>

最后，我的index.html：

<!DOCTYPE html>
<html lang="en" ng-app="payApp">

    <meta charset="UTF-8">
    <title>Pay This</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="app/componentes/css/pay-style.css" rel="stylesheet" />
    <link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>

<head>


</head>

<body>

<pay-Invoice></pay-Invoice>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/payapp.js"></script>
<script src="app/components/list-component/payment-component.js"></script>
<script src="app/components/list-component/home-component/home-component.js"></script>
<script src="app/factory/pay-factories.js"></script>
<script src="app/routes/routes.js">

</body>
</html>

我读过我还需要使用ngRoute，所以我添加并创建了我的routes.js。

EDITED

这是我的routes.js代码：

(function(){
    'use strict';

    angular
        .module('payApp')
        .config(config);


    config.$inject = ["$routeProvider","$locationProvider"];
        function config($routeProvider, $locationProvider){

            $routeProvider
                .when('/home',{
                    template: '<home></home>',
                })

                .when('/listado',{
                    template: '<pay-invoice></pay-invoice>',
                })

                .otherwise({
                    redirectTo: '/home',
                });

                $locationProvider.html5Mode(true);

        }

        })();

我需要传递两件事：

主页视图，因为这是我需要展示的第一件事。
列表视图，将由主视图上的按钮触发。

我该怎么做？我还需要对index.html做些什么？希望你能帮帮我。

Answer 1

如果您使用angular-route，则需要在主html文件中创建容器div。

所以而不是

<pay-Invoice></pay-Invoice>

在索引html文件中放置一个容器组件：

<div ng-view></div>

这将告诉ngRoute它应该将路由组件挂载到此容器，并在位置更改时将其切换更多相关信息：https://docs.angularjs.org/api/ngRoute/directive/ngView

主页和列表页面

1 个答案: