如何将html页面包含在另一个页面中(有角度)

时间:2017-06-03 12:29:44

标签: javascript html angularjs

我有这个页面:

http://www.interload.co.il/upload/5798737.jpg

当我使用"创建"页面作为一个不同的html页面,它工作很好,但当我把它包含在主页面时,它不起作用。

我尝试了这段代码:(只是包含事项的最后一行)



<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1255">
<title>Insert title here</title>
</head>
<body>
	<table border="1">
		<tr>
			<th>id</th>
			<th>name</th>
			<th>password</th>
			<th>email</th>
			<th>actions</th>
		</tr>
		<tr ng-repeat="c in g.companies">
			<td>{{c.id}}</td>
			<td>{{c.name}}</td>
			<td>{{c.password}}</td>
			<td>{{c.email}}</td>
			<td><button data-ng-click="g.deleteCompany($index)">X</button>
				<button name="update" ng-click="g.showUpdateCompany()">O</button></td>
			<td ng-show="g.show">
			Company id: <input value="{{c.id}}" disabled="disabled"><br/>
			Company name: <input value="{{c.name}}" disabled="disabled"><br/>
			Company password: <input ng-model="c.password"><br/>
			Company email: <input ng-model="c.email"><br/>
			<button ng-click="g.hideUpdateCompany(c)">Save</button>
			</td>
			<!--replace $index with c (the company)-->
		</tr>
	</table>
	<div ng-include src="'createCompany.html'"></div>
</body>
</html>
&#13;
&#13;
&#13;

这是我想要包含的页面:

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1255">
<title>Insert title here</title>
</head>
<body>
<h2>Create new Company:</h2>
Company ID: <input type="text" ng-model="c.newCompany.id"> <br>
Company name: <input type="text" ng-model="c.newCompany.name"> <br>
Company password: <input type="password" ng-model="c.newCompany.password"> <br>
Company email: <input type="email" ng-model="c.newCompany.email"> <br>
<button ng-click="c.createCompany()">Sumbit</button> <br>
<p ng-show="c.success"> Company Added Successfully ! </p>
<p ng-show="c.failure"> Company Failed to be added ! </p>
</div>
</body>
</html>
&#13;
&#13;
&#13;

在此处设置了控制器(ui-view):

&#13;
&#13;
/**
 * 
 */
var app = angular.module("myApp", [ "ui.router" ]);

app.config([ '$locationProvider', function($locationProvider) {
	$locationProvider.hashPrefix('');
} ]);

app.config(function($stateProvider, $urlRouterProvider) {

	$stateProvider
	.state("main", {
		url : "/main",
		templateUrl : "../HTMLs/AdminMain.html",
	})
	.state("getCompanies", {
		url : "/getCompanies",
		templateUrl : "../HTMLs/getCompanies.html",
		controller : "getCompaniesCTRL as g"
	})
	.state("createCompany", {
		url : "/createCompany",
		templateUrl : "../HTMLs/createCompany.html",
		controller : "createCompanyCTRL as c"
	})
	.state("404", {
    	url : "/404",
        templateUrl : "../HTMLs/404.html"
    });
	$urlRouterProvider.when("", "/main"); // first browsing postfix is empty
											// --> route it to /main
	$urlRouterProvider.otherwise('/404'); // when no switch case matches -->
											// route to /404
});
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

ng-include的正确语法是:

<div ng-include src="updateCompany.html"></div>

<ng-include src="updateCompany.html"></ng-include>

<ng-include src="'updateCompany.html'"></ng-include>

<div ng-include src="'updateCompany.html'"></div>

希望它可以帮到你