Javascript 简单的ng包括不工作_Javascript_Html_Angularjs_Angularjs Scope

Javascript 简单的ng包括不工作

javascript html angularjs

Javascript 简单的ng包括不工作,javascript,html,angularjs,angularjs-scope,Javascript,Html,Angularjs,Angularjs Scope,我第一次玩AngularJS，我很难在页眉和页脚中使用ng include 这是我的树： myApp assets - CSS - js - controllers - vendor - angular.js - route.js ...... ...... ...... main.js pages -

我第一次玩AngularJS，我很难在页眉和页脚中使用ng include

这是我的树：

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

home.html

<div>
<p>Welcome to the {{ title }} Page</p>
</div>


欢迎来到{{title}}页面

当我进入home.html页面时，我的页眉、导航和页脚不会出现。

您正在执行页眉的包含。url而不是页眉。html。看起来您希望在src属性中使用文本，因此应该将它们括在引号中，正如@driffy在注释中提到的那样

改变

 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>

到

如果这不起作用，请检查浏览器控制台是否有404的问题

我遇到了类似的问题

ng include

没有填充我的分部的内容，但没有控制台错误，也没有404错误

然后我意识到我做了什么

为我修正：确保您在

ng include

之外有

ng应用程序

！太明显了。作为一个有角度的noob的代价。

我有一个类似的问题，简单的ng包括不渲染：

我将文件路径用单引号括起来，现在呈现：

我也遇到了这个问题。这就是我的工作

所以不要写这个：

您想添加

ng app=”“

。因此，它应该是这样的：

是的，如果没有

，ng将尝试评估

ng include（“”）中的内容
此评估是您不将{{}
放在这些指令中的另一个原因。
我一直在努力解决同一问题，并且在不同的堆栈中几乎完成了所有建议，但它对我不起作用。在控制台上，我得到了错误信息：
只有协议方案支持跨源请求：http、数据、chrome、chrome扩展、https、chrome扩展资源
后来我意识到，我必须使用本地web服务器（MAMP、WAMP等）才能使其正常工作
请注意上面的错误消息。很可能您没有使用本地web服务器来运行您的网站。
我刚刚想出了这个办法
对我来说，我使用CDN导入angular.min.js文件，但显然不起作用。我转到：

并将ng app=”“
包含在我的身体标签中：
<body ng-app="">
<div ng-include="'testfile.html'"></div>



现在一切正常。干杯
 ng include在浏览器和浏览器中都不起作用，但在Firefox中起作用，所以这可能是兼容性问题。当然，可以尝试在Firefox或Edge或其他浏览器中生成报告。我也有类似的问题：愚蠢的错误导致了它，我在下面的文本区域中有
例如：
`

未正确关闭，请更正如下：
<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>



如果您通过某个服务器（本地主机或在线）查看您的文件，而不是在文件系统下直接查看您的文件，那么ng include指令应该可以正常工作(file:///yourpath/index.html)
应该可以正常工作。ng include文件仅适用于从web服务器获取的文件（需要类似链接的内容）。
如果您直接从本地文件夹获取文件（c:\myinclude.html将不起作用）
可能的重复要添加到此文件，您需要将路径用单引号括起来：src=“'partials/structure/header.html'”
Doh我忘记检查控制台中的404。“我走错了路。”这是非常重要的信息。在这起作用之前，我检查了我的代码很多年了+1有人能详细说明为什么必须传递字符串文字吗？似乎是一个可以避免的大问题，也许我遗漏了什么？它更灵活。我用它来嵌入函数调用，动态生成合适的url。你节省了我的时间！谢谢你，我是经过反复试验才得到这个东西的。但是，仍然不知道“inside”的用途是什么？为什么只“creates problems”为什么会发生这种情况？您需要用单引号将字符串文字（例如，您的文件路径）括起来，因为全引号内的任何内容都将作为代码计算，因此如果没有单引号，Angular编译器会告诉你在某个地方有一个函数，它的名字是文件path.JEEZ，这是很难找到的信息。我知道这听起来很可笑，但很多文章都忽略了这一部分。甚至一些“Hello World”教程也没有提到这一点。我先找到这个答案，然后找到一个可以工作的JSFIDLE来学习我需要的
。荒谬，这个帮了我的忙。甚至不提这一点。对于上述答案，假设已经应用了ng应用程序，并且我们在其中使用了ng include。最好将ng app=“myApp”添加到开始标记中，但不要添加到…或在正文标记中欢迎使用Stackoverflow。若您在堆栈溢出处签出页面以备将来使用，那个就更好了-谢谢，chrome浏览器以其过度防护策略而闻名，它确实会阻止脚本从File://origin调用页面，这就是为什么不能在chrome中呈现角度部分。尽管如此，这是一个正确的假设，并且可能是多种原因的一部分，这些原因可能会阻碍ng view/ng-include的功能。不，这在IE11和Chrome上不起作用。只适用于FF。
<body ng-app="">
<div ng-include="'testfile.html'"></div>

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" > `

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>