简单的ng包括不工作

Simple ng-include not working

本文关键字：工作 包括不 ng 简单      更新时间：2023-09-26

我第一次使用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>

main.js

var app = angular.module("app", ["ngResource", "ngRoute"]);

app.config(function($routeProvider) {
$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});
$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html

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

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

您正在执行头的includeurl而不是标头html。看起来你想在src属性中使用文字，所以你应该用引号把它们括起来，就像@DRiFTy在评论中提到的那样。

更改

 <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>

至

 <div ng-include src="'partials/structure/header.html'"></div>
 <div ng-include src="'partials/structure/navigation.html'"></div>    
 <div id="view" ng-view></div>   
 <div ng-include src="'partials/structure/footer.html'"></div>

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

我在一个简单的ng include not rendering中遇到了类似的问题：

<div ng-include="views/footer.html"></div>

我用单引号包装了文件路径，现在它呈现为：

<div ng-include="'views/footer.html'"></div>

我遇到了一个类似的问题。

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

然后我意识到我做了什么。

为我修复：确保您在ng-include之外有ng-app！显而易见。成为一个有棱角的角落的代价。

我也遇到了这个问题。这就是对我有效的。

因此，与其写这个：<div ng-include="'html/form.htm'"></div>

您要添加ng-app=""。所以它应该是这样的：<div ng-app="" ng-include="'html/form.htm'"></div>

我遇到了同样的问题，几乎已经完成了不同堆栈中建议的所有操作，但对我来说不起作用。在控制台上，我收到了错误：

"跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https、chrome延伸资源。"

后来我意识到，我必须使用本地网络服务器（MAMP、WAMP等）才能使其工作。

请注意上面的错误消息。很可能您没有使用本地网络服务器来运行您的网站。

我刚刚想出了这个！

对我来说，我使用CDN导入angular.min.js文件，但该文件显然不起作用。我切换到：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

并将ng-app=""包含在我的身体标签中：

<body ng-app="">
<div ng-include="'testfile.html'"></div>

现在运行良好。干杯

是的，如果没有''，ng将尝试评估ng-include("") 内的内容

此评估是不将{{}}放入这些指令的另一个原因。

ng-include在chrome和explorer中不起作用，但在Firefox中起作用，因此这可能是兼容性问题。当然，请尝试在Firefox、Edge或其他浏览器中生成报告。

I也有类似的问题：愚蠢的错误导致了IT，我在下面的textArea例如：

<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>

我想发布它可能会帮助我花了几个小时解决的任何问题。。。。

ng include文件仅适用于从web服务器获取的文件（需要类似的东西http://mywebsite/myinclude.html链接）。如果您直接从本地文件夹中提取文件（c:''myinclude.html将不起作用），则

不起作用

如果您通过服务器（本地主机或在线）查看文件，ng-include指令应该正常工作，并且NOT在文件系统下直接查看文件(file:///yourpath/index.html)。

w3schools的这个例子应该很好用。

相关文章：