Question

我无法使用AngularJS正确实现部分视图。我在ProAngularJS一书中引用了一个例子（清单10-12）。但是，即使该示例在启动浏览器时也不呈现局部视图。

我只是在文件资源管理器中选择主html文件并在浏览器中运行它。 table.html中绝对没有残留物显示为主html页面中的部分视图。

我至少期待看到＆＃34;行动＆＃34;和＆＃34;完成＆＃34;从局部视图显示为表头。但是，我一无所获。

我错过了什么？

主页：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Directives</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
            .controller("defaultCtrl", function ($scope) {
                $scope.todos = [
                    { action: "Get groceries", complete: false },
                    { action: "Call plumber", complete: false },
                    { action: "Buy running shoes", complete: true },
                    { action: "Buy flowers", complete: false },
                    { action: "Call family", complete: false }];
            });
    </script>
</head>
<body>
    <div id="todoPanel" class="panel" ng-controller="defaultCtrl">
        <h3 class="panel-header">To Do List</h3>
        <ng-include src="'table.html'"></ng-include>
    </div>
</body>
</html>

table.html：

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Action</th>
            <th>Done</th>
        </tr>
    </thead>
    <tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
        <td>{{$index + 1}}</td>
        <td ng-repeat="prop in item">{{prop}}</td>
    </tr>
</table>

Answer 1

您是否仅通过打开文件来运行它？

由于ng-include使用了Ajax，因此只需像file://file.html那样打开就必须通过某种服务器运行它。

如果您是节点人员，那么测试事物的简单方法就是使用此...

https://github.com/andrewpthorp/simple-http-server

您可以使用npm install simple-http-server安装它，然后使用nserver -p PORT在任何目录中启动服务器。

无法在AngularJS中显示局部视图

1 个答案: