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

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>

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.
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.
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.
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,0113 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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related