Where I want the html to go:
<div>{{display}}</div>
app.js
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.contact = //get the html from contact.html
$scope.display = $scope.contact
});
contact.html
<form>
...
</form>
How could I pass the html to the js file?
UPDATE: I can't use ng-include because this is a SPA, so the area where the contact.html will go isn't static.
You'll need to use the $sce service and ng-sanitize. Once you have the HTML you want to include in your controller/directive, use :
$sce.trustAsHtml($scope.htmlItem);
And in your view:
<div ng-bind-html="htmlItem"></div>
And the HTML will be rendered onto the page.
Alternativelly, you can you ng-include.
<!-- HEADER -->
<div ng-include="'partials/header.html'"> </div>
<!-- MAIN VIEW -->
<div animated-view></div> //This is using ngRoute to populate content.
<!-- FOOTER -->
<div ng-include="'partials/footer.html'"> </div>
Remember to use nested " ' ' " for Angular to understand.
You should also take a look at $RouteProvider.
This is a example of mine, showing how to use RouteProvider to populate ng-view. You can set the view, controllers and initial variables on the routeProvider.
