Angular (ionic) stateprovider templateUrl破解 [英] Angular (ionic) stateprovider templateUrl breaking
问题描述
这是一个奇怪的问题,我正准备放弃它.我正在用 Ionic 制作一个应用程序,它允许我添加状态就好了,就像这样:
This is a weird one and I'm just about giving up on it. I'm making an app in Ionic, and it allowed me to add states just fine, like this:
$stateProvider
.state('menu', {
url: "/menu",
templateUrl: "templates/menu.html",
controller: "mainCtrl"
})
.state('products', {
url: "/products",
templateUrl: "templates/products.html",
controller: "productsCtrl"
})
等等.我在那里有几个州,几天前一切正常.我今天回到项目并添加了一个新状态 - 它中断了.我以与旧状态完全相同的方式添加了新状态 - 当我看到它不起作用时甚至复制粘贴.
发生的情况是浏览器开始一遍又一遍地请求默认值(每秒多次)并且没有加载任何模板.
etc. I have a few states there and it was all working fine a couple of days ago. I came back to the project today and added a new state - and it breaks. I added the new state the exact same way as the old ones - even copy-pasting when I saw it didn't work.
What happens is that the browser starts requesting the default over and over again (many times per second) and no template ever loads.
现在是奇怪的部分.这是我的新状态:
Now for the weird part. This is my new state:
.state('settings',{
url: "/settings",
templateUrl: "templates/settings.html",
controller: "settingsCtrl"
})
但是当我将 templateUrl
更改为 template
并直接插入模板文件的全部内容时 - 它工作得很好.
BUT when I change the templateUrl
to template
and insert directly the entire contents of the template file - it works perfectly.
该模板文件与其他可以正常工作且不会破坏应用程序的文件位于完全相同的位置.
That template file is located in the exact same location as the others which do work and don't break the app.
更新:如果我使 templateUrl
成为一个返回文件绝对路径的函数(尽管不是像其他人那样的相对路径),它也可以工作.也许这是一个缓存问题?
Update:It also works if I make templateUrl
a function which returns the absolute path to the file (though not the relative one like the others have). maybe it's a caching issue somehow?
也许我还需要做其他事情?我是 Ionic 和 Angular 的新手.
Maybe there's something else I need to do? I'm new to Ionic and to Angular.
更新这是我的整个 app.js
UPDATE This is my entire app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('menu', {
url: "/menu",
templateUrl: "templates/menu.html",
controller: "mainCtrl"
})
.state('products', {
url: "/products",
templateUrl: "templates/products.html",
controller: "productsCtrl"
})
.state('settings',{
url: "/settings",
templateUrl: function (){return "myproject/www/templates/settings.html"},
controller: "settingsCtrl"
})
.state('leads', {
abstract: true,
url: "/leads",
template: '<ion-nav-view></ion-nav-view>'
})
.state('leads.index', {
url : "",
templateUrl: "templates/leads.html",
controller: "leadsCtrl"
})
.state('leads.detail', {
url: '/{lead_id}',
templateUrl: "templates/lead.html",
controller: "leadCtrl",
resolve:
{
lead_id: function ($stateParams) {
return $stateParams.lead_id}
}
})
$urlRouterProvider.otherwise('/menu');
});
推荐答案
很难说,你的问题在哪里.所以我创建了工作plunker,设置如下所示.请观察它并与您的本地版本进行比较.它可以帮助您揭示问题
It is hard to say, where is your issue. So I created working plunker, with the settings shown below. Please, observe it and compare with your local version. It could help you to reveal the issue
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
});
$stateProvider
.state('menu', {
url: "/menu",
templateUrl: "templates/menu.html",
controller: "mainCtrl",
})
.state('products', {
url: "/products",
views : {
"products" : {
templateUrl: "templates/products.html",
controller: "productsCtrl"
}
}
})
.state('settings',{
url: "/settings",
//templateUrl: function (){return "myproject/www/templates/settings.html"},
views : {
"settings" : {
templateUrl: "templates/settings.html",
controller: "settingsCtrl"
}
}
})
这是 index.html
And this is the index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-tabs class="tabs-icon-top">
<ion-tab title="Menu" icon="icon ion-home" href="menu">
<ion-nav-view name=""></ion-nav-view>
</ion-tab>
<ion-tab title="Products" icon="icon ion-person" href="/products">
<ion-nav-view name="products"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="icon ion-settings" href="/settings">
<ion-nav-view name="settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
在操作中检查它此处
这篇关于Angular (ionic) stateprovider templateUrl破解的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!