CODEWITHSUNDEEP
htmlangularjsdata-binding
Aldeen
Aldeen

Reputation: 21

Angularjs : Data binding with HTML generated from a variable

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

Upvotes: 1

Views: 2132

Answers (2)

Aldeen
Aldeen

Reputation: 21

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...

Upvotes: 1

Stepan Suvorov
Stepan Suvorov

Reputation: 26236

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

Upvotes: 2

Related Questions