Using ng-bind-html to assign a form?

Question

I want to click a button to replace a variable with a form. How do I do this?

JavaScript

var MainCtrl = angular.module('mainCtrl', []);

MainCtrl.controller('MainCtrl', function ($scope) {
  $scope.bar = 'Foo';
  $scope.foo = function(){
    $scope.bar = '<form class="form-inline" role="form">   <div class="form-group">     <label class="sr-only" for="exampleInputEmail2">Email address</label>     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">   </div>   <div class="form-group">     <label class="sr-only" for="exampleInputPassword2">Password</label>     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">   </div>   <div class="checkbox">     <label>       <input type="checkbox"> Remember me     </label>   </div>   <button type="submit" class="btn btn-default">Sign in</button> </form>';
  }
});

var fooApp = angular.module(
    'fooApp', ['ngSanitize', 'mainCtrl'];
);

HTML

  <body ng-app='fooApp' ng-controller="MainCtrl">
    <div ng-bind-html="bar"></div>
    <button class="btn" ng-click="foo()">Change bar to form</button>
  </body>

Plnkr: http://plnkr.co/edit/TQLbVWnfF9G0LVg9tiJl

Brandon Horst · Accepted Answer · 2014-06-10 21:50:36Z

1

That's not a very Angular way to do it.

In general, your controllers should never contain any markup, nor should they interact directly with the DOM.

I would recommend setting a variable to determine whether or not the button has been clicked, and then using ngShow and ngHide to conditionally display the content or the form.

Here's an example:

HTML:

  <body ng-app='fooApp' ng-controller="MainCtrl">
    <div ng-hide="showForm">Foo</div>
    <form class="form-inline" role="form" ng-show="showForm">   <div class="form-group">     <label class="sr-only" for="exampleInputEmail2">Email address</label>     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">   </div>   <div class="form-group">     <label class="sr-only" for="exampleInputPassword2">Password</label>     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">   </div>   <div class="checkbox">     <label>       <input type="checkbox"> Remember me     </label>   </div>   <button type="submit" class="btn btn-default">Sign in</button></form>

    <button class="btn" ng-click="foo()">Change bar to form</button>
  </body>

JS:

MainCtrl.controller('MainCtrl', function ($scope) {
  $scope.showForm = false;
  $scope.foo = function() {
    $scope.showForm = true;
  }
});

And here's the Plunker.

Let me know if that meets your needs. There are tons of options to avoid using markup in your controllers.

answered Jun 10, 2014 at 21:50

Brandon Horst

2,0701 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A T Over a year ago

No worries, actually taking a look with fresh eyes what I want are different routes. Now just need to figure out how to keep the entire template the same except for one div in the left column…

A T Over a year ago

Just moved my code from ngRouter to ui.router; I think the solution is neigh

Collectives™ on Stack Overflow

Using ng-bind-html to assign a form?

JavaScript

HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JavaScript

HTML

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related