ng-click HTML code works fine but same code in an angularjs function.ng-click does not working

Question

HTML

<div id="rightpane">
  <div id="rightpanecontent" >  
     <div id ="Addbtn" style="text-align: right;"> 
     <button type="btnAdd" class="btnAddText" ng-click="addText()" style="margin-top:10px;margin-left:166px; color: white;background-color:#673ab7;">Add Text</button>
   </div>
  <div class="si-note-separator" ></div> 
 <div id="myDIV" style="display: none;">     
 <textarea ng-model="imagecomment" name="taname" id="taid" wrap="soft" ></textarea>
  <button type="button" 
ng-click="addCommentToImage()" >Save</button>
  </div>
</div>
</div>

Controller.js file.(need to make html code dynamic,so put it in controller.js file.ng-click does not work)

function load() {
    var text = '';
     text = text + '<div id ="Addbtn" style="text- 
      align:right;">' + '<button type="btnAdd" class="btnAdd" click="Add()" style="margin-top:10px;margin-left:166px; color: white;background-color:#673ab7;">Add</button>'+
    '</div>' +
  '<div class="si-note-separator" ></div>'+ '<div id="myDIV">'+     
  '<textarea ng-model="comment" name="taname" id="taid" wrap="soft" ></textarea>'+
 '<button type="button" ng-click="addComment()" >Save</button>'+
      '</div>';
 }

you need to not just render it, but compile it as well

Aleksey Solovey
– Aleksey Solovey

2018-11-01 10:00:57 +00:00
Commented Nov 1, 2018 at 10:00 — Aleksey Solovey
– Aleksey Solovey, Commented Nov 1, 2018 at 10:00

Pankaj Parkar · Accepted Answer · 2018-11-01 11:06:11Z

I don't see any dynamic thing your load function template, I'd recommend you to keep this html inside html file and load the same using ng-include directive

template.html

<div>
    <div id ="Addbtn" style="text- 
          align:right;">
        <button type="btnAdd" class="btnAdd" click="Add()" style="margin-top:10px;margin-left:166px; color: white;background-color:#673ab7;">Add</button>
    </div>
    <div class="si-note-separator" ></div>
    <div id="myDIV">
      <textarea ng-model="comment" name="taname" id="taid" wrap="soft" ></textarea
      <button type="button" ng-click="addComment()" >Save</button>
    </div>
</div>

Usage

<div ng-include="clicked ? '': 'template.html'"></div>

Just on click of button toggle clicked flag.

The other way would be adding the html content inside DOM and compile it using $compile service, which helps angular relative code and triggers the respective directive/component for the same.

element.append($compile(text)($scope));

Sunny Verma · Accepted Answer · 2018-11-01 11:17:47Z

0

If you want to make your html dynamic then you'll have to compile it using $compile service, so that it can be attached to the scope object. Then only ng-click will work.

answered Nov 1, 2018 at 11:17

Sunny Verma

1114 bronze badges

Collectives™ on Stack Overflow

ng-click HTML code works fine but same code in an angularjs function.ng-click does not working

HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related