使用 ng-include 的最简单方法答案

【问题标题】：Simplest way to use ng-include使用 ng-include 的最简单方法
【发布时间】：2014-08-23 18:51:47
【问题描述】：

我一直在尝试编写一个简单的 angular.js 应用程序，其中包含另一个使用 ng-include 的文件。我必须做某事/错过某事，以使包含的文件不被包含在内。我一定是做错了什么，但看不出是什么。

这里是 Index.html

<!DOCTYPE html>
<html>
<head ng-app="app">
    <title>Demo</title>
    <script data-require="angular.js@1.2.0" data-semver="1.2.0"     src="http://code.angularjs.org/1.2.0/angular.js"></script>
    <script data-require="angular-resource@1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular-resource.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div ng-controller="appctrl">
        <h1>Airports</h1>
        <div ng-include="'extra.html'"></div>
        <h1>Airports</h1>
    </div>
</body>
</html>

文件 extra.html 包含要包含的元素

<h2>Inside</h2>

script.js 是初始化 angular 的文件

(function () { 
    'use strict';

    var app = angular.module('app', []);
    app.run(['$route',  function ($route) {  // Include $route to kick start the router.
    }]);        

    angular.module('app').controller('appctrl', [function AppCtrl() { }]);
});

我创建了Plunk 来证明我的意思。那里没有太多内容：定义的 ng-app、对角度文件的引用和几个用于描述插入点的标题。两者之间没有显示任何内容。

在 angular.js 中使用 ng-include 最简单的方法是什么？

【问题讨论】：

你缺少 angular-route.js

标签： javascript html angularjs angularjs-directive angularjs-ng-include

【解决方案1】：

将ng-app 放在身体部位。
包括angular-route.js（例如<script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>）并将此依赖项添加到您的应用初始化中（var app = angular.module('app',['ngRoute']）
不要将您的 script.js 代码放在 (function(){}) 中。（如果你想这样做，调用这个函数(function(){})();）

您的代码有更改：http://plnkr.co/edit/k1dFPeb9E2B2pjTthi1K?p=preview

【讨论】：

太棒了。我很感激。我在没有第 1 步和第 2 步的情况下尝试了它，并且在第 3 步到位后，包含仍然有效。我想无论如何我都会按照这些步骤进行操作。再次感谢。

【解决方案2】：

这是我的脚本：

HTML：

<div id="superhero-nav-container">
    <ul id="superhero-nav">
        <li><a ng-click='template = templates[0]'>Biography & Stats</a></li>
        <li><a ng-click='template = templates[1]'>History</a></li>
        <li><a ng-click='template = templates[2]'>Powers</a></li>
        <li><a ng-click='template = templates[3]'>Enemies</a></li>
    </ul>
</div>
<div class="superhero-templates" ng-include src='template.url'></div>

控制器中的JS：

    $scope.templates = [
        { url: '/views/superheroes/biography.html' },
        { url: '/views/superheroes/history.html' },
        { url: '/views/superheroes/powers.html' },
        { url: '/views/superheroes/enemies.html' }
    ];
    $scope.template = $scope.templates[0];

我有类似菜单的东西，可以改变底部 div 中的 html。希望对您有所帮助。

编辑（以下评论）：

你的错误是：

将ng-app 属性放在文件不在头脑中
包含 angular-resource.js（例如<script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script>）并将此依赖项添加到您的应用初始化中：

angular.module('app', ['ngResource']) ...
不要将您的 script.js 代码放入 (function(){})。如果你想这样做，调用这个

function (function(){})();

这是您的工作代码： Plunker

【讨论】：

感谢您回答我的问题。我尝试将您的代码添加到我的示例中，但效果是一样的。然而，当我查看调试器时，我注意到 Angular 深处有一个“未捕获对象”错误。还有其他事情会停止加载文件。我还没有找到它。这是一个Plunk，添加了更改。