Question

这是我的菜单 Transaksi > Sewa有konfirmasi按钮，应该加载包含表单输入的新页面和点击后的提交按钮。

我用当地语言申请所以为了简单，它租车应用，在sewa页面有租车交易清单，但尚未确认付款。所以konfirmasi按钮可以解决这个问题。

如果用户点击konfirmasi按钮，它将根据交易ID（路线参数）加载一些信息，并有文件输入从银行转账上传支付证明和一些提交按钮上传到图像到服务器和更新数据库状态为当前交易。

我关注official documentation create to create Sewa page，因此我的目录结构类似于app/pages/transaksi/transaksi.module.js，app/pages/transaksi/sewa/sewa.module.js

以下是transaksi.module.js代码

(function () {
    'use strict';
    angular.module('BlurAdmin.pages.transaksi', [
        'BlurAdmin.pages.transaksi.sewa'
    ])
        .config(routeConfig)

        function routeConfig($stateProvider){
            $stateProvider
            .state('transaksi', {
                url: '/transaksi',
                template: '<ui-view></ui-view>',
                abstract: true,
                //templateUrl: 'app/pages/transaksi/transaksi.html',
                //controller: 'TransaksiCtrl',
                title: 'Transaksi',
                sidebarMeta: {
                    icon: 'ion-grid',
                    order: 100              
                }
            });
        }

})();

以下是sewa.module.js

(function () {
    'use strict';

    angular.module('BlurAdmin.pages.transaksi.sewa', [])
        .config(routeConfig);

    function routeConfig($stateProvider){
        $stateProvider
            .state('transaksi.sewa', {
                url: '/sewa',
                templateUrl: 'app/pages/transaksi/sewa/sewa.html',          
                controller: 'SewaCtrl', //listing work normally
                title: 'Sewa',
                sidebarMeta: {
                    order: 0
                }
            })
            .state('transaksi.sewa.konfirmasi', {
                url: '/konfirmasi/:nomor_order_sewa',
                templateUrl: 'app/pages/transaksi/sewa/konfirmasi.html', //won't load
                controller: 'KonfirmasiCtrl',
                title: 'Konfirmasi Sewa', //but title is changed
                sidebarMeta: {
                    order: 0                
                }           
            });

    }   

})();

控制器加载app/pages/transaksi/sewa/sewaCtrl.js类似这样的

(function (){
    'use strict';

    angular.module('BlurAdmin.pages.transaksi.sewa')
        .controller('SewaCtrl', SewaCtrl)
        .controller('ModalCtrl', ModalCtrl)
        .controller('KonfirmasiCtrl', KonfirmasiCtrl);

function KonfirmasiCtrl($scope, $http, $routeParams){
    $scope.nomor_order = $routeParams.nomor_order_sewa;
    alert($scope.nomor_order);  
}



...
...

控制台中没有错误，我的templateUrl konfirmasi.html存在且包含一些简单的内容

<h1>ini halaman konfirmasi untuk order {{ nomor_order }}</h1>

那么为什么当我点击konfirmasi按钮时，页面只会改变tittle但是templateUrl没有加载。

也许我在konfirmasi路线定义的sewa.module.js做错了？还是某个地方？

如果您需要更详细的信息，请发表评论。

Answer 1

请不要正确阅读angular ui router nested views not working并在本节阅读nested state abstrac usage

//注意：abstract仍然需要一个ui-view来为其子节点填充。

//你可以直接在这里添加它。

我开始想也许页面不会加载因为没有容器所以稍微尝试和错误。

我发现我需要在<div ui-view></div>添加sewa.html，所以现在sewa.html看起来像

<div ui-view>
    ...
    sewa.html content here
    ...
</div>

感谢stackoverflow。

AngularJS模糊管理模板是不是没有加载？

1 个答案: