CODEWITHSUNDEEP
angularjsngsanitize
Formalizator
Formalizator

Reputation: 585

Angular template compilation javascript

I have the controller that loads template from the server. Controller receives the template by http and compiles it to the valid html. All is fine but js-calls.

My template contains href's/buttons with href-javascript/onclick actions. Here is simplified snippet:

/*global angular */
var app = angular.module("app", ["ngSanitize"]);
app.controller('app.core.ctrl', function($scope, $rootScope, $interpolate) {
  "use strict";
  $scope.check = 1;
  $scope.fetchContent = function() {
    $scope.content = $interpolate(
      '<a href="http://example.com">not interesting link</a>'+
      '<a href="javascript:callSuperLogic();"> My business template link {{check}}</a>' +
      '<button onclick="callSuperLogic();"> My business template button {{check+1}}</button>'
    )($scope);
  };

  $scope.fetchContent();
});

var callSuperLogic = function() {
  "use strict";
  alert('It works!!!');
};
a,
button {
  display: block;
}
div {
  border: 1px solid #A6A6A6;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
<div ng-app="app">
  <div ng-controller="app.core.ctrl">
    My template calls:
    <div ng-bind-html="content"></div>
  </div>
</div>

I've tried $sce.trustAsResourceUrl('javascript:callSuperLogic();'); but it didn't help.

Is there any way to call js-event from compiled template?

UPD1: Found workaround: ng-include This behaves as predicted. But this way I can not make any error processing.

Upvotes: 2

Views: 1609

Answers (1)

Mario Lamacchia
Mario Lamacchia

Reputation: 1723

If ngInclude does not fit your needs, the best approach would be using a directive, so you can have direct access to the element and put the content inside with jQuery:

module.directive('myTemplate', function() {
  return {
    compile: function(tElement) {
      var html = '<button onclick="clickme()">Click me!</button>';
      tElement.replaceWith(html);
    }
  };
});

In this case

<my-template></my-template>

becomes

<button onclick="clickme()">Click me!</button>

If you are getting the template with a ajax call, you have to use the $compile service (and this can be done from the link function):

module.directive('myTemplate', function($http, $compile) {
  return {
    link: function(scope, element, attrs) {
      $http.get(attrs.url).then(function(res) {
        tElement.replaceWith($compile(res.data)(scope));          
      });
    }
  };
});

You can use this like:

<my-template url="myurl/template.html"></my-template>

EDIT:

to reload when url changes: http://plnkr.co/edit/j0nVOm

Upvotes: 1

Related Questions