AngularJS ng-include 模板未在 Phonegap 应用程序中加载

Posted

技术标签:

【中文标题】AngularJS ng-include 模板未在 Phonegap 应用程序中加载【英文标题】:AngularJS ng-include templates not loading in Phonegap app 【发布时间】:2013-03-01 23:55:34 【问题描述】:

我正在构建一个使用 AngularJS 的 ios Phonegap 应用程序。

我在ng-switch 中有一些ng-includes,它们会根据项目的类别更改某些列表项的样式。

        <div 
            ng-repeat="i indata"
            ng-include="src='partials/card.html'""
        >
        </div>

partials/card.html 文件中,是开关:

<div 
ng-switch on="i.group"
>
<div ng-switch-when="Music">
    <div ng-include="src='partials/card_details/'+i.category+'.html'"
    ></div>
</div>  
<div ng-switch-when="Film"
    ng-include="src='partials/card_details/buy.html'"></div>        
<!-- default, load group -->
<div ng-switch-default ng-include="src='partials/card_details/'+i.group+'.html'"
></div>

这一切都在我的桌面浏览器上的 Chrome 中完美运行,但是当我运行我的 Phonegap 应用程序时,使用与 Chrome 中运行的页面相同的符号链接 www 文件夹,所有内容都会加载除了里面的部分switch 语句。

我在 Xcode 控制台中没有收到任何错误,我尝试将“/”添加到 src 的开头,因为我在 Phonegap 中的根路径存在问题,但我不明白的是为什么 partials/card.html 加载而 not *partials/card_details*

有什么想法吗?

【问题讨论】:

看看这个,也许Angular对语法很挑剔,像&lt;div ng-switch-when="Film"&gt;&lt;ng-include src="'partials/cart_details/buy.html'"&gt;&lt;/ng-include&gt;&lt;/div&gt;这样的东西有用吗? &lt;ng-include src="'partials/card.type_details/buy.html'"&gt;&lt;/ng-include&gt;&lt;/div&gt; - 这就是我应该将变量内容放入该属性的方式吗? 该技术不走运,在 Chrome 中运行良好,在 Phonegap 应用程序中失败 【参考方案1】:

这是不是因为下面一行中的 ng-include 末尾有双引号:

   <div 
        ng-repeat="i indata"
        ng-include="src='partials/card.html'""
    >
    </div>

【讨论】:

+1 不错的观察。这个问题目前是我犹豫是否要切换到 Angular 的唯一原因。这绝对是一个可能的原因。 这更有可能是问题中的拼写错误。我去看看。我目前使用了一种解决方法来避免在另一个包含中嵌入包含。 @dk123 Angular 非常出色,值得艰难的学习曲线,我只在 iPhone 上的 webkit 视图中发现了这个特殊问题 - 在我桌面上的 Chrome 中它运行良好。 @Skeater 感谢您的更新。不过,我最近主要开发网络应用程序,如果 iPhone 上的某些东西无法正常工作,那么这一事实让我有些犹豫。你能把你提到的工作贴出来吗?【参考方案2】:

尝试从文件名中删除 _(下划线)。我记得看到过关于这个的提示。

<div ng-include="src='partials/cardDetails/'+i.category+'.html'"></div>

而不是

<div ng-include="src='partials/card_details/'+i.category+'.html'"></div>

编辑:

我还发现 ng-include 在文件名方面是区分大小写的。

【讨论】:

请在你的答案中添加更多信息(举个例子,格式正确)

以上是关于AngularJS ng-include 模板未在 Phonegap 应用程序中加载的主要内容,如果未能解决你的问题,请参考以下文章

AngularJs学习笔记——ng-include

angularjs中的条件ng-include

AngularJS中ng-include指令实现头部和尾部的共用

AngularJS中ng-include指令实现头部和尾部的共用

Express + AngularJS + HTML:ng-include 不起作用(404 - 找不到页面错误)

AngularJS:ng-include 和 ng-controller