角（离子）stateprovider templateUrl断裂 [英] Angular (ionic) stateprovider templateUrl breaking
问题描述
这是一个奇怪的一个，我只是关于它放弃。我在做离子的应用程序，它允许我补充状态就好了，像这样的：
$ stateProvider
.STATE（'菜单'，{
网址：/菜单
templateUrl：模板/ menu.html
控制器：mainCtrl
}）
.STATE（'产品'，{
网址：/产品，
templateUrl：模板/为products.html
控制器：productsCtrl
}）
等。我有几个州那里，这是所有工作的罚款几天以前。我今天回来的项目，并添加一个新的状态 - 它打破。我添加了新的状态完全相同的方式为旧的 - 甚至可以复制粘贴，当我看到它没有工作结果。
什么情况是，浏览器启动请求的默认一遍又一遍（每秒很多次）和无模板永远负荷。
现在的怪异的一部分。这是我的新的状态：
.STATE（'设置'，{
网址：/设置
templateUrl：模板/ settings.html
控制器：settingsCtrl
}）
但是，当我修改 templateUrl 到模板键，直接插入模板文件的全部内容 - 它的工作原理完美。
这是模板文件位于同一位置作为做工作，不破的应用程序的人。
的更新的：它也可以，如果我做 templateUrl 返回的绝对路径的文件（虽然不是相对的像一个函数其他人）。也许这是一个缓存的问题不知何故？
也许有别的东西，我需要做什么？我是新来的离子和棱角分明。
更新这是我的整个app.js
angular.module（'启动'，['离子'，'starter.controllers'，'starter.services']）.RUN（函数（$ ionicPlatform）{
$ ionicPlatform.ready（函数（）{
//默认隐藏附件栏（删除此显示键盘上方的附件栏
//表单输入）
如果（window.cordova＆安培;＆安培; window.cordova.plugins.Keyboard）{
cordova.plugins.Keyboard.hideKeyboardAccessoryBar（真）;
}
如果（window.StatusBar）{
// org.apache.cordova.statusbar要求
StatusBar.styleDefault（）;
}
}）;
}）的.config（函数（$ stateProvider，$ urlRouterProvider，$ locationProvider）{
$ locationProvider.html5Mode（{
启用：真实，
requireBase：假的
}）; $ stateProvider
.STATE（'菜单'，{
网址：/菜单
templateUrl：模板/ menu.html
控制器：mainCtrl
}）
.STATE（'产品'，{
网址：/产品，
templateUrl：模板/为products.html
控制器：productsCtrl
}）
.STATE（设置，{
网址：/设置
templateUrl：函数（）{返回的myproject / WWW /模板/ settings.html}，
控制器：settingsCtrl
}）
.STATE（'线索'，{
摘要：真实，
网址：/引线
模板：'＆LT;离子NAV-视图＆gt;＆LT; /离子NAV-视图＆gt;
}）
.STATE（'leads.index'，{
网址：
templateUrl：模板/ leads.html
控制器：leadsCtrl
}）
.STATE（'leads.detail'，{
网址：'/ {} lead_id，
templateUrl：模板/ lead.html
控制器：leadCtrl
解决：
{
lead_id：函数（$ stateParams）{
返回$ stateParams.lead_id}
}
}）
$ urlRouterProvider.otherwise（'/菜单'）;
}）;
这是很难说的，哪里是你的问题。所以我创建工作plunker ，如下所示的设置。请观察它，并与当地的版本进行比较。它可以帮助您揭示问题
$ locationProvider.html5Mode（{
启用：真实，
requireBase：假的，
}）;$ stateProvider
.STATE（'菜单'，{
网址：/菜单
templateUrl：模板/ menu.html
控制器：mainCtrl
}）
.STATE（'产品'，{
网址：/产品，
观点：{
产品：{
templateUrl：模板/为products.html
控制器：productsCtrl
}
}
}）
.STATE（设置，{
网址：/设置
// templateUrl：功能（）{回报的myproject / WWW /模板/ settings.html}，
观点：{
设置：{
templateUrl：模板/ settings.html
控制器：settingsCtrl
}
}
}）
这是index.html的
＆LT;机身NG-应用=启动器动画=滑动左 - 右 - ios7＆GT; ＆LT;离子标签类=标签图标顶＆GT; ＆LT;离子分页标题=菜单图标=图标离子家HREF =菜单＆GT;
＆LT;离子导航视图名称=＆GT;＆LT; /离子NAV-视图＆gt;
＆LT; /离子标签＆gt; ＆LT;离子分页标题=产品图标=图标离子人称的href =/产品＆GT;
＆LT;离子导航视图名称=产品＆GT;＆LT; /离子NAV-视图＆gt;
＆LT; /离子标签＆gt; ＆LT;离子分页标题=设置图标=图标离子设置的href =/设置＆GT;
＆LT;离子导航视图名称=设置＆GT;＆LT; /离子NAV-视图＆gt;
＆LT; /离子标签＆gt; ＆LT; /离子标签＆GT;＆LT; /身体GT;
检查它在行动这里
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"
})
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.
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?
Maybe there's something else I need to do? I'm new to Ionic and to Angular.
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');
});
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"
}
}
})
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>
Check it in action here
这篇关于角（离子）stateprovider templateUrl断裂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
