Question

我是Angular和Ionic的新手，我在使用状态导航方面遇到了麻烦。我有一个只有标题栏和按钮的页面。当我单击按钮时，我希望页面现在显示我使用$ state.go（）编写的部分html文件。当我单击按钮时，状态肯定会更改（网址更改并且有一个滑动动画）但它只显示一个空白页而不是我的html文件。我将部分html文件放在与索引相同的目录中，因此它不是路径错误。

我的代码：

的index.html

<body ng-app="homePage" ng-controller = "homeController">

<ion-pane>

    <ion-header-bar class="bar-energized">
        <h1 class = "title">Home</h1>
    </ion-header-bar>

    <button ng-click="logIn()"> Log In </button>                    

    <ion-nav-view></ion-nav-view>

</ion-pane>
</body>

homePage.js

var homePage = angular.module("homePage", ['ionic','ui.router']);

homePage.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){

$stateProvider
    .state('main', {
        url:"/",
        controller: 'homeController'            
    })
    .state('login',{
        url: '/login',                  
        templateURL: 'LoginPagePartial.html',
        controller: 'homeController'        
    })
    ;

    $urlRouterProvider.otherwise('/');   
}]);


homePage.controller('homeController', ['$scope', '$location', '$http', '$state', function($scope, $http, $location, $state){

$scope.logIn=function(){            
    $state.go('login');     
}
}]);

LoginPagePartial.html

<ion-view>
   <ion-content>        

        <h1>Welcome</h1>

   </ion-content>
</ion-view>

如果我用template: '<h1>Welcome</h1>'替换“templateURL”和文件名，那么该页面将更改状态并正确显示“welcome”。无论我做什么，标题栏都会正确显示。最终我想让这个文件更复杂，所以在状态下硬编码不是一个选择。是否还需要其他东西才能使templateURL正确调用文件？或者，一旦调用文件以便实际显示html，我还需要做些什么吗？

Answer 1

TemplateURL从www目录开始。因此，如果您的部分位于"While Using the App"，那么您应该编写模板网址，例如www/app/templates

Ionic templateURL在更改状态时不显示文件

1 个答案: