ui-router没有显示任何内容而不是<div ui-view =“”>

时间:2017-11-27 18:05:26

标签: html angularjs angular-ui-router

我正在尝试使用ui-router模块创建页面表单。我在配置文件中创建了状态。但是,当打开account/trade时,它只显示<div ui-view></div>。我缺少什么?

配置

var app = angular.module("KryptoApp", ["ngRoute", "ui.router", "ngCookies", "ngAnimate"]);
// app.config(['$qProvider', function ($qProvider) {
//     $qProvider.errorOnUnhandledRejections(false);
// }]);
app.config(function ($stateProvider, $routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/static/templates/index.html",
            controller: "IndexController"
        })
        .when("/register", {
            templateUrl: "/static/templates/register.html",
            controller: "RegisterController"
        })
        .when("/Login", {
            templateUrl: "/static/templates/login.html",
            controller: "LoginController"
        })
        .when("/account/trade", {
            templateUrl: "/static/templates/trade.html",
            controller: "TradeController"
        });

    $stateProvider
        .state('trade', {
            url: '/account/trade',
            templateUrl: "/static/templates/trade.html",
            controller: "TradeController"
        })
        .state('trade.coin', {
            url: 'account/trade/coin',
            templateUrl: "/static/templates/trade_coin.html",
            controller: "TradeController"
        });

        $routeProvider.otherwise('/'); 
});

app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});

app.config(['$urlRouterProvider',function($urlRouterProvider){
    $urlRouterProvider.otherwise('/');
}]);

/static/templates/trade.html

<div ui-view>

/static/templates/trade_coin.html

测试

2 个答案:

答案 0 :(得分:1)

我不确定ngRouter和uiRouter可以共存而不会造成伤害。我可能是ngRoute捕获浏览器位置然后不渲染您的视图。如果您没有ng-view指令,则ngRouter无法显示内容。

您是否可以尝试将所有$ routeProvider.when(..东西迁移到$ stateProver.state(..然后停止向您的应用程序注入ngRoute?)

答案 1 :(得分:0)

当您使用 function ex1() { var f, h, g; var random = Math.floor(Math.random() * 2) + 1; switch (random) { case 1: f = "20"; //Entfernung h = "180"; //Geschwindigkeit g = "2"; //Beschleunigung sol1 = 45; break; case 2: f = "100"; h = "108"; g = "5"; sol1 = 63; break; } document.getElementById("text").innerHTML = "Die Bösewichte sind auf der Flucht auf einer geraden Autobahn. Sie sind " + f + " Meter von dir entfernt und ihr fahrt mit einer konstanten Geschwindigkeit " + h + "km/h, wobei du dich stetig um " + g + " m/s² beschleunigst."; document.getElementById("question").innerHTML = "Wie lange brauchst du, um sie einzuholen?"; document.getElementById("unit").innerHTML="s"; button.disabled = true; confirmation.disabled = false; input.disabled = false; } 时,您需要根据ui-router documentation配置您的路线,如下所示:

ui-router