How can I click to load a html form into a target in angular without using jquery?
My working script so far but I am stuck on
<html>
<head>
<script src="components/angular/angular.js"></script>
<script>
var app = angular.module("myapp", [])
app.controller("FormController",function($scope,$http) {
$scope.load = function() {
return $http({
method: "get",
url: "form.php"
}).then(function(response) {
$scope.form = response.data;
// how can I target id="form"??
});
};
}
);
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="FormController">
<button ng-click="load()">Load</button>
<div id="form"> place the form here </div>
</div>
</div>
</body>
</html>
form.php,
<form name="signup_form" novalidate ng-submit="signupForm()">
<input type="text" />
</form>
Is that a proper way of doing it to load a form instead of using $http?
You can try something like below
In HTML
<div id="form"> {{form}} </div>
In JS
var app = angular.module("myapp", [])
app.controller("FormController",function($scope,$http) {
$scope.form = 'default value'; //assign you default value first
$scope.load = function() {
$http.get('form.php').success(function(data) {
//After getting response re-assign `$scope.form` by response value
$scope.form = data;
});
};
}
);
In form.php
echo '<form name="signup_form" novalidate ng-submit="signupForm()">
<input type="text" />
</form>';
You could also use this approach by using condition ng-include:
<div ng-include="'form.html'" ng-if="readyToLoadForm==true"></div>
Try like:
<div ng-controller="FormController">
<div my-form></div>
</div>
app.directive('myForm', function() {
return {
replace:true,
controller:function($scope){
$scope.isLoaded = false;
$scope.load = function(){
$scope.isLoaded = true;
}
},
template: '<div><button ng-click="load()">Load</button><div ng-if="isLoaded" ng-include="\'form.php\'" ></div></div>',
link:function(scope, element) {
}
}
});
<?php
$html = <<<HTML
<form name="signup_form" novalidate ng-submit="signupForm()">
<input type="text" />
</form>
HTML;
// sometime later
echo $html;