Angularjs : Data binding with HTML generated from a variable

Question

I already apologize for asking, just beginning with angularjs (and client-side dev) and I am trying to do something pretty simple which does not work. I have some HTML that I want to generate from a variable. This html contains a ng-model directive that I want to bind with some data. Basically if I put directly the html inside the html file, data binding works fine:

HTML

<form role="form" ng-submit="search()" ng-controller="AppController">
  <div class="form-group">
    <label for="search__origin">Departure</label>
    <input type="text" class="form-control" id="search__origin" ng-model="routes[0].origin" /> {{routes[0].origin}}
  </div>
</form>

Anjularjs

var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
    $scope.routes = {}
    var route_format = {
        origin: 'SG',
        departure_date: new Date(),
        return_date: new Date()
    };
    $scope.routes['0'] = route
})

Fiddle here

But if I put my HTML (containing a "ng-model" directive) into a $scope variable, then use "ng-bind-html" directive to generate the html directly into the html template, then data binding does not work:

HTML

<form role="form" ng-submit="search()" ng-controller="AppController">
  <div class="form-group">
    <label for="search__origin">Departure</label>
    <div ng-bind-html=myhtml class="form-group"></div>
    {{routes[0].origin}}
 </div>
</form>

angularjs

var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope,$sce) {
    $scope.routes = {}
    var route_format = {
        origin: 'SG',
        departure_date: new Date(),
        return_date: new Date()
    };
    $scope.routes['0'] = route_format;
    var html = '<input type="text" class="form-control" id="search__origin" ng-model="routes[0].origin"/>'

    var getTrustedHtml = function(unsafe_html) {
        var x = $sce.trustAsHtml(unsafe_html);
        return x;
    }
    $scope.myhtml = getTrustedHtml(html);
})

Fiddle here

I am wondering here why it does not work, is it because I process in the wrong order and that when the html is generated on the page, the relation with the $scope variable cannot be done?

I would appreciate some help here :), thanks in advance! Al

Stepan Suvorov · Accepted Answer · 2016-02-09 10:36:20Z

2

ng-bind-html will not compile directives for you.

you need either use $compile service and compile this fragment yourself that is ugly

or

restructure the code not to have directives inside ng-bind

answered Feb 9, 2016 at 10:36

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

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

1 Comment

Aldeen Over a year ago

Thanks for your quick and clear answer. I am actually trying to generate Html Inputs dynamically when user will click on a 'add' button. I want these inputs to be bind. I could use ng-include and write html from templates as Inputs are statics (origin, destination, departure_date, origin_date) but then would I need to change the 'ng-model' on the fly at each iteration. Would you suggest anything?

Aldeen · Accepted Answer · 2016-02-09 12:10:06Z

Thanks STEVER for giving me the hint, appreciated!

I have solved my issue using the directive 'ng-include' and creating a html template. It also allows me to iterate ('ng-repeat') over this html template with dynamic 'ng-model's as below:

HTML

<form role="form" ng-submit="search()" ng-controller="AppController">
  <div class="form-group">
    <div ng-repeat="i in range(route_nb) track by $index">
      <div ng-include="'test.html'"></div>
    </div>
  </div>
  {{routes[0].origin}}
  {{routes[1].origin}}
</form>

<script type="text/ng-template" id="test.html">
  <div class="form-group">
    <label for="search__origin">Departure</label>
    <input type="text" class="form-control" id="search__origin" ng-model="routes[$index].origin" />
  </div>
</script>

jsangular

var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
    $scope.routes = {};
    $scope.route_nb = 2;
    $scope.routes['0'] = {
        origin: 'SG',
        departure_date: new Date(),
        return_date: new Date()
    };
    $scope.routes['1'] = {
        origin: 'LON',
        departure_date: new Date(),
        return_date: new Date()
    };

    $scope.range = function(n) {
        return new Array(n);
    };
})

Fiddle

However I am wondering whether it is really efficient in term of performances...

Collectives™ on Stack Overflow

Angularjs : Data binding with HTML generated from a variable

HTML

Anjularjs

HTML

angularjs

2 Answers 2

1 Comment

HTML

jsangular

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Anjularjs

HTML

angularjs

2 Answers 2

1 Comment

HTML

jsangular

Comments

Your Answer

Sign up or log in

Post as a guest

Related