Angularjs add html to a variable using ui-sref link

Question

I have the following code that adds html to a variable. However, when it is displayed on the page, the link does not work.

What is the best way to get a ui-sref to work with dynamic introduction?

JAVASCRIPT

 .controller('page', function($scope, $rootScope, $http, $state, $sce) { $scope.message = $sce.trustAsHtml('A <a ui-sref="login">login</a> link'); }) 

HTML

 <div ng-bind-html="message"></div> 

Answer 1

There is a working plunker

I would say that we can use a combination:

• $state.href() (doc here ) and
• ng-href (doc here )

(but only if the parameters passed are part of the url)

It will be the result.

 <a ng-href="{{$state.href(myStateName, myParams)}}"> 

And now (in plunker ) we can change myStateName to parent , parent.child , home and it will correctly change the generated href:

 <input ng-model="myStateName" /> <input ng-model="myParams.param" /> 

Because these are states in plunker

 $stateProvider .state('home', { url: "/home", ... }) .state('parent', { url: "/parent?param", ... }) .state('parent.child', { url: "/child", ... 

Check here