Angular JS- Dynamic anchor tag ng-click not working after compile

Question

I am trying to add dynamically created anchor tag in HTML for this purpose I
have used below code in JS :

var tabList = $sce.trustAsHtml('<a ng-click="getActiveTag()">Test</a>');
var temp = $compile(tabList)($scope); 
$scope.tabList = temp[0];

and on html side I have used :

<p ng-bind-html="tabList"></p>

but ng-click not working :( ..any help would be appreciated.

you have to manually insert that $compiled dom, not with ng-bind-html. — YOU
– YOU, Commented Oct 11, 2015 at 7:07

Akash · Accepted Answer · 2015-10-12 15:40:09Z

2

You can use .appendTo function. Adding sample code.

<body>
<p id="appendHere"></p>
</body>

.js
angular.module("testApp",[]).controller("testContoller", function($scope, $compile)
{
$scope.tabList = '<a ng-click="getActiveTag()">Test</a>';
$compile($scope.tabList)($scope).appendTo(angular.element("#appendHere")); 
//$scope.tabList = temp[0];
});

$scope.getActiveTag = function()
{
    alert('calling anchor click');
}

This needs jquery loaded first before angular library.

Edited

var testVar = angular.element('<a ng-click="getActiveTag()">Test</a>');
$compile(testVar)($scope).appendTo(angular.element("#appendHere"));

edited Oct 12, 2015 at 15:40

answered Oct 11, 2015 at 7:00

Akash

862 silver badges11 bronze badges

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

Comments

Alok Pathak · Accepted Answer · 2015-10-11 07:48:21Z

1

Thank you all for your suggestions .I found the solution, I have removed ng-bind-html and place already compiled DOM as suggested by "YOU".And after studying thoroughly Angularjs-compiler, follow the steps below and it works :)

// Step 1: parse HTML into DOM element
var template = angular.element(''<a ng-click="getActiveTag()">Test</a>'');
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the scope.
var element = linkFn($scope);
// Step 4: Append to DOM (optional)
$("#content").append(element);

answered Oct 11, 2015 at 7:48

Alok Pathak

8751 gold badge9 silver badges20 bronze badges

3 Comments

Akash Over a year ago

This is exactly what i mentioned in my answer dude...In this solution you are extending number of coding line which I believe you should look into it.. Anyway happy coding...!!! :)

Alok Pathak Over a year ago

Thanks Akash, I have tried your solution only thing changed is first parse HTML into DOM element and then pass this dom element to $compile "$compile(template) " instead of passing directly $scope element "$compile($scope.tabList)".

Akash Over a year ago

Dude..I dont know what you are referring to..If you are concerning $scope element then I would say you can still declare it as a normal variable.. See my edition. Apart from this you have static anchor element which you need to compile and for that I dont think you need to parse that HTML into DOM element with angular.element function.

HankScorpio · Accepted Answer · 2015-10-13 21:02:57Z

0

Try ngHref in your HTML instead:

<p>
  <a ng-href="getActiveTag()">Test</a>
</p>

edited Oct 13, 2015 at 21:02

answered Oct 11, 2015 at 6:50

HankScorpio

3,65117 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular JS- Dynamic anchor tag ng-click not working after compile

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related