简体   繁体   中英

How to include html page in another page (angular)

I have this page:

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

When I use the "create" page as a differrent html page it works grate, but when I include it in the main page it doesn't work.

I tried this code: (just the last row of the include matters)

 <!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> 

This is the page I want to include:

 <!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> 

the conrollers are set in here (ui-view):

 /** * */ 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 }); 

The correct syntax for ng-include is this:

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

or

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

or

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

or

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

Hope it helps you

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM