Angularjs adding html to variable with ui-sref link

Question

I have the following code that adds html to a variable. However, when it get's shown on the page, the link doesn't work.

What's the best way to get a ui-sref link to work when inserting it dynamically?

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>

Probably have to use $compile - $sce.trustAsHtml($compile('A <a ui-sref="login">login</a> link')($scope)); — tymeJV
– tymeJV, Commented May 5, 2015 at 16:26
Why are you trying to add it dynamically? Can you not just put it in the template/html file? — ajkavanagh
– ajkavanagh, Commented May 5, 2015 at 16:50

Radim Köhler · Accepted Answer · 2015-05-05 16:53:53Z

2

There is a working plunker

I would say, that we can use combination of:

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

(but only in case, if the params passed are part of url)

This would be the result

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

And now (in the plunker) we can change myStateName into parent, parent.child, home and it will change properly 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 it here

answered May 5, 2015 at 16:53

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

Collectives™ on Stack Overflow

Angularjs adding html to variable with ui-sref link

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related