How to write HTML code in $rootScope variable using angularJS?

Question

I am trying to change the value of a label in my HTML page on an event,is it possible to insert html code into the variable?

The HTML code is like:

<div ng-controller="welcomeCon" ><label>{{ welcomemsg }}</label></div>

and in some controller in the script:

$rootScope.welcomemsg="You are not logged in,please log in or register"

Is there a way to make the words log in and register to be links? If no, I would be happy if someone could guide me what to do in alternative.

Thanks

Answer 1

Use $sce service. Here is the sample example

angular.module('app',[])
.controller("welcomeCon", function($scope,$sce){
  $scope.loginHtml = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
  $scope.trustedHtml = $sce.trustAsHtml($scope.loginHtml);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="welcomeCon">
  <div ng-bind-html="trustedHtml"> 
  </div>
</div>

OR you can use ngSanitize module

angular.module('app',["ngSanitize"])
.controller("test", function($scope){
  $scope.html = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>



<div ng-app="app" ng-controller="test">
  <div ng-bind-html="html">
    
  </div>
</div>

Answer 2

You can do that as the other answers suggest by using the $sce service or ng-bind-html, but I would object to that approach because the links won't change, so why do it by defining the html in your code instead of in the html.

What you probably want is something like this:

<ul class="my-menu">
    <li ng-if="$root.loggedIn">
        <a href="url/to/logout">Logout</a>
    </li>
    <li ng-if="!$root.loggedIn">
        You are not logged in, please <a href="login">login</a> or <a href="register">register</a>
    </li>
</ul>

Answer 3

Use ng-bind-html directive to bind HTML to the model value. See link: http://www.w3schools.com/angular/ng_ng-bind-html.asp

You need to use ngSanitize module in your application. Include angular-santize.js file to do it.

Answer 4

I know you've already got your answer, but just to put this out there...

You can also do this using a very simple directive as like a child view, and avoid using $rootScope all together. This promotes reuse across applications, and follows angular's modular approach of breaking things down into small parts (in this case very small parts!).

welcomeMessage.js

app.directive('welcomeMessage', function() {
  return {
    restrict: "E",
    templateUrl: "welcomeMessage.html"
  };
});

welcomeMessage.html

<p>
  You are not logged in, please 
  <a href="/login">log in</a> or 
  <a href="/register">register</a>
</p>

Sample Usage (in your index.html)

<welcome-message />

Sample Plunk