Question

我一直在尝试编写一个简单的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是初始化角度

的文件

(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的最简单方法是什么？

Answer 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

Answer 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属性放在。的html标记中文件不在头脑中
包含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

使用ng-include的最简单方法

2 个答案: