How to include html page in another page (angular)

Viewed 8087

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

1 Answers
Related