how to change properties of html elements in angular?

Question

I have an element which is automatically generated via my API call as

<a target="_blank" href="http://www.work.com/reward"><b class="orange tdu">My Work History</b></a>

now i want to modify it like

<a ng-click="message(messageItem.id)">

i.e I want to remove the original properties and add angulars ng-click to it.

I cannot use JQuery.

nothing in particular......but i am thinking of selecting that element via document.getElementById and change that property...but i don't know how to do that — abhit
– abhit, Commented Dec 20, 2016 at 14:46
Just adding the property wont work - you need to recompile the HTML against the $scope to get the ngClick recognized. — tymeJV
– tymeJV, Commented Dec 20, 2016 at 14:49
Why you donnot use window.location in your javascript function? — mgh
– mgh, Commented Dec 20, 2016 at 15:01

Deep · Accepted Answer · 2016-12-20 15:30:41Z

1

Try like this in your controller.

1: select the element and remove unwanted attributes using

element.removeAttribute("target");

2: Add required attribute on the element using

element.setAttribute('ng-click', 'loadMicrosite(messageItem.id)'); '' you can use string concatenation for messageItem.id

3: Now you have the updated element in the DOM but its not attached with the scope yet. Use $compile for it. As per angular docs $compile

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

https://docs.angularjs.org/api/ng/service/$compile

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope,$compile) {
  
var sNew = document.querySelector('a');
sNew.removeAttribute("target");
sNew.removeAttribute("href");
sNew.setAttribute('ng-click', 'loadMicrosite(messageItem.id)');


$compile(sNew)($scope);
  
 $scope.loadMicrosite = function(param)
 {
   alert("I am called");
 }
  
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
   <a target="_blank" href="http://sprintweb.abc.com/sos-children-s-villages-of-india-new-delhi-delhi"><b class="orange tdu">SOS Children's Villages of India</b></a>

</body>
</html>

edited Dec 20, 2016 at 15:30

answered Dec 20, 2016 at 14:56

Deep

9,7962 gold badges24 silver badges34 bronze badges

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

6 Comments

Heretic Monkey Over a year ago

Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See How to Answer for more information.

Deep Over a year ago

Sure @MikeMcCaughan Update the answer with details.

abhit Over a year ago

can u also tell me what should i do if i have multiple <a> elements.........do i loop over each one and perform the same thing for every one else.

Deep Over a year ago

you can do that but first check why do you need such implementation, if possible just take the link text from auto generation part and create new element using that.

abhit Over a year ago

isn't this what you have done in the example.......remove the attribute and then add new

|

mgh · Accepted Answer · 2016-12-20 15:16:27Z

0

You can get your html from api and open the page with window.open

In html:

<a ng-click="loadMicrosite(messageItem.id)">
   <b class="orange tdu">SOS Children's Villages of India</b>
</a>

In Controller:

$scope.loadMicrosite = (id) ->
  url = getStringOfUrlFromServer
  window.open(
  url,
  '_blank');

answered Dec 20, 2016 at 15:16

mgh

1,0093 gold badges10 silver badges38 bronze badges

Collectives™ on Stack Overflow

how to change properties of html elements in angular?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related