How to create href link inside controller in Angularjs?

Question

I am showing a flash error message if a mobile number is not validated.

Flash message as "Mobile number not validated. click here to validate".

But I want to display the same error message with "click here" as the hyper link which will redirect me to the top of the page.

if (res.json.response.mobilevalidated == false) {

      FlashService.Error("Mobile number not validated." + (<a href="#/otp"> click here </a> ) +" to validate", false);

      $scope.disabled = function() {

          $scope.model.disabled = true;
          $scope.title = "Cannot access until mobile number is validated.";
      }
   } else {
        $scope.model.disabled = false;
    }

How can I use html tags inside the controller? As my error message is a dynamic one.

PerfectPixel · Answer 1 · 2016-08-29T12:56:51.010

0

What you are looking for can be achieved using $sce that is included in Angular. Take a look at the Documentation here: https://docs.angularjs.org/api/ng/service/$sce

You basically define your HTML string as trusted in the Controller like this: $sce.trustAsHtml(<a href="http://stackoverflow.com">Stackoverflow</a>") and bind it in the template using ng-bind-html like <span ng-bind-html="mySuperCoolLink"></span>.

There is an example in the documentation liked above.

Edit:

Your function FlashService.Error receives an invalid string. You use string concatenation to include your HTML link, however, that only works if your HTML link is stored in a variable. So you have to do one of the following:

A)
FlashService.Error("Mobile number not validated. <a href=\"#/otp\"> click here </a> ) to validate", false);

or B)
var link = "(<a href=\"#/otp\"> click here </a> )";
FlashService.Error("Mobile number not validated." + link + " to validate", false);

In your provided code, the JS engine will recognise the round brackets as they are valid JS, but not the pointy brackets (I forgot their name...).

Edit 2: Plunkr: https://plnkr.co/edit/WzzWtnJW98u3e7eTLn2q?p=preview

edited Aug 29 '16 at 12:56

answered Aug 29 '16 at 08:43

PerfectPixel

1,918
1
17
18

I want the "click here" as href link in error message. I tried as above in my controller but its showing "Unexpected token < " – kalai Aug 29 '16 at 09:12
I used above code to create a link. Its working. Now if i click on "click here" it will redirect me to the otp page but i need css styling to make it as hyperlink. – kalai Aug 29 '16 at 10:00
Unless your link styles are too specific, they should get applied to the Element. Otherwise you are free to include classes or inline styles. – PerfectPixel Aug 29 '16 at 10:04
I used below code to create a link. Its working. Its taking entire error message as link. But i need only "click here" as hyperlink and rest as message – kalai Aug 29 '16 at 10:22
Sounds like an issue with either the a-tags or the surrounding HTML. Could you post the generated HTML. You can get that from the Browser Inspector. – PerfectPixel Aug 29 '16 at 11:44
Mobile number not validated. click here to validate – kalai Aug 29 '16 at 12:15
Well ng-click will bind the whole div als clickable. You are making it too complicated in my opinion. Here is a plunkr using $sce: https://plnkr.co/edit/WzzWtnJW98u3e7eTLn2q?p=preview – PerfectPixel Aug 29 '16 at 12:56
Can you please give your suggession that i have file upload functionality to upload a file. But I want to change "choose file" button name as "Upload file" with same functionality (which will display the selected file name). http://stackoverflow.com/questions/39140728/how-to-change-choose-file-name-using-condition-in-angularjs?noredirect=1#comment65626617_39140728 – kalai Aug 30 '16 at 06:07

score 0 · Answer 2 · answered Aug 29 '16 at 08:50

0

Use ng-include.
Js add

$scope.includePath = function () {
   `templateUrl="..../your template path"`  
};

HTML

<div ng-include="includePath" > New html is here </div>

Here in this case you can use <button> if you want to give click event.

answered Aug 29 '16 at 08:50

ojus kulkarni

1,877
3
25
41

score 0 · Answer 3 · answered Aug 29 '16 at 10:04

HTML

    <div ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error', 'selected': hlink}" ng-click = "linking()" ng-if="flash" ng-bind="flash.message" style="margin-top: 20px; ">            
  </div>

My Controller

if (res.json.response.mobilevalidated == false) {

         $scope.linking = function(){
              $location.path('/otp');
         }

         $scope.hlink =" click here";

         FlashService.Error("Mobile number not validated." + $scope.hlink +" to validate" , false);

      }

How to create href link inside controller in Angularjs?

3 Answers3