logo标签列表

使用ng-include的最简单方法

javascripthtmlangularjsangularjs-directiveangularjs-ng-include
3

我一直在尝试编写一个简单的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文件并且加上一些标题来区分插入点。这之间没有任何内容显示。

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

你缺少了angular-route.js - felipekm
2个回答
3
  1. 将 ng-app 放在 body 部分。
  2. 引入 angular-route.js（例如：<script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>），并将其添加到应用程序初始化的依赖项中（var app = angular.module('app',['ngRoute']）。
  3. 不要将 script.js 代码放在 (function(){}) 中。（如果你想这么做，请调用此函数 (function(){})();）。

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

太棒了。我非常感激。我尝试去掉步骤1和2，只使用步骤3，但include命令仍然起作用了。不过，我认为按照步骤进行是很好的习惯。再次感谢。 - SystemsGuy
0
这是我的一个脚本：
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。希望这能帮到你。

编辑（针对下面的评论）：

你的错误是：

  1. 将 ng-app 属性放在文档的 html 标签中而不是 head 中

  2. 包含 angular-resource.js（例如 <script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script>），并将其添加到应用程序初始化的依赖项中：

    angular.module('app', ['ngResource']) ...

  3. 不要将 script.js 代码放在 (function(){}) 内。如果你想这样做，请调用此

    function (function(){})();

这是你的可工作代码： Plunker

感谢您回答我的问题。我尝试将您的代码添加到我的示例中，但效果相同。然而，当我查看调试器时，我注意到Angular中出现了一个“未捕获的对象”错误。有其他事情阻止文件被加载。我还没有找到它。这是一个带有添加更改的Plunk。 - SystemsGuy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接