How to click to load a html form into a target in angular?

Question

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?

MH2K9 · Answer 1 · 2014-12-12T19:45:51.290

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>';

thanks. can I not to use `echo` in my form? is there anyway to set the response data to be `html`? — Run, Dec 12 '14 at 19:45

score 1 · Answer 2 · answered Dec 12 '14 at 19:45

1

You could also use this approach by using condition ng-include:

<div ng-include="'form.html'" ng-if="readyToLoadForm==true"></div>

Plunkr Link

answered Dec 12 '14 at 19:45

Venky Viswanath

1,001
7
4

1

It is a variable in scope that you can turn on conditionally. Check out the plunkr for details. It will load the external file only if 'true'. – Venky Viswanath Dec 12 '14 at 19:48

score 1 · Answer 3 · answered Dec 12 '14 at 20:17

Try like:

HTML

<div ng-controller="FormController">
    <div my-form></div>
</div>

JS

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

<?php
$html = <<<HTML
  <form name="signup_form" novalidate ng-submit="signupForm()">
          <input type="text" />
      </form>
HTML;

// sometime later
echo $html;

How to click to load a html form into a target in angular?

3 Answers3

HTML

JS

PHP