使用ng-include

时间:2017-04-15 17:48:32

标签: javascript html angularjs

我正在学习Angular中的代码。我正在尝试在主文件 1.html 中包含的文件 myTable.htm 中执行ng-repeat,但这不起作用。

1.HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
<div ng-app=""> 
  <div ng-include="'myTable.htm'"></div>
</div>

<p>The HTML, and AngularJS code, for this table are located in the file "myTable.htm".</p>

</body>

</html>

myTable.htm

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
</div>

如果我将<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>添加到 myTable.htm 并执行 myTable.htm ,那么我会在选择框中获取值。但是当我执行 1.html 时,它不会填充。

任何人都可以告诉我我做错了什么,或者我试图做的是什么?

1 个答案:

答案 0 :(得分:0)

您只需要在first.html

中定义ng-app
<div ng-app="myApp"> 

myTable.htm

中删除它
<div ng-controller="myCtrl">

<强> DEMO