how to add ui-sref in dynamic html template?

Question

I need to add dynamic template on click for that i have used :

var action_template='';
app.controller('EventCtrl',function($rootScope){
     action_template =  action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png"></a></li></ul>';                  
   $rootScope.template=action_template;  
});

In html:i have used ngSanitize

<ul>
       <li ng-bind-html="template"></li> 
</ul>

template is appending perfectly but there is no href link.

what I am doing wrong ? Or is there any solution for doing the same thing ?

The main problem was unable to add any angular directives such as ng-click, ng-href, ui-sref etc. But after adding $sce.trustAsHtml it is adding ui-sref but not adding any hyperlink.

Hint will be appreciable.

Thanks

Is there a reason you're using $rootScope instead of $scope? — kauffmanes
– kauffmanes, Commented Aug 1, 2017 at 11:33
Try $rootScope.template=$sce.trustAsHtml(action_template);. Don't forget to inject $sce in your controller — Vivz
– Vivz, Commented Aug 1, 2017 at 11:34

Gaurav Srivastava · Accepted Answer · 2017-08-01 11:36:05Z

2

I think you forgot trustAsHtml in your controller(you can see in the snippet after running, that ui-sref is present in the source):-

var app = angular.module("myApp", []);
var action_template='';
app.controller("myCtrl", function($scope,$rootScope,$sce) {
  
   action_template =  action_template +'<ul><li><a ui-sref="/root/authenticate">Link</a></li></ul>';                  
   $rootScope.template=$sce.trustAsHtml(action_template);  
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
<ul>
       <li ng-bind-html="template"></li> 
</ul>
</div>

answered Aug 1, 2017 at 11:36

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

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

Comments

byteC0de · Accepted Answer · 2017-08-01 11:41:35Z

2

You need trust your HTML, using $sce, Try below code

var jimApp = angular.module("mainApp",  []);
jimApp.controller('EventCtrl',function($rootScope, $sce, $scope){
     var action_template='';
     action_template =  action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png" alt="Default image">Link</a></li></ul>';                  
   $scope.template=$sce.trustAsHtml(action_template);  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp" ng-controller="EventCtrl">
<ul>
       <li ng-bind-html="template"></li> 
</ul>
</div>

answered Aug 1, 2017 at 11:41

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

4 Comments

uday214125 Over a year ago

now , ui-sref is present but it is not adding any href link , why so ? please see my updated question.

byteC0de Over a year ago

@user7390851 i didn't understand what you mean

uday214125 Over a year ago

after adding $sce.trustAsHtml it is giving like this : <a ui-sref="/root/authenticate"></a> but it should be like <a ui-sref="/root/authenticate" href="/root/authenticate"></a> means auto href will be added automatically.

byteC0de Over a year ago

It's not a problem , angular automatically adding the href when you use ui-sref

Collectives™ on Stack Overflow

how to add ui-sref in dynamic html template?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related