0

enter image description hereI am trying to append HTML elements dynamically which have AngularJS ng-click, but it’s not working. I have tried {{2+2}} in iEl.append(<div>{{2+2}}<div>), but it’s not working.

What am I doing wrong?

$scope.appendContent = function() {
    var iEl = angular.element( document.querySelector( '#med2' ) );

    iEl.append('<div class="row well"  ng-controller=Directive id="med1"> <div class="col-sm-12"  > <p>Medication {{2+2}}</p> <div class="col-sm-4"> Medicine <div class="well" dragular="{"classes":{"mirror":"custom-green-mirror"},"nameSpace":"same"}"></div> </div> <div class="col-sm-3"> Frequency <div class="well" dragular="{"classes":{"mirror":"custom-green-mirror"},"nameSpace":"same"}"></div> </div> <div class="col-sm-4"> Days <div class="well" dragular="{"classes":{"mirror":"custom-green-mirror"},"nameSpace":"same"}" ng-click=appendContent()></div> </div> <div class="col-sm-1"> <button class="close cursorDefault" ng-click="removeDIV()">X</button> </div> </div>');
};

I want html view like this, auto append when ever fill the value.

Harjeet Singh
  • 65
  • 9
  • 7
    You are doing it wrong.. Totally. Read http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – dfsq Dec 31 '15 at 17:16
  • What exactly is not working? Are you getting any errors in the console? – jHilscher Dec 31 '15 at 17:16
  • I believe directives and binding equations must be present in the DOM when AngularJS bootstraps the page. Also, as it's already been commented, doing this kind of DOM manipulation in not a very good approach when using AngularJS. It is not in the correct paradigm. – Andrew Tomlinson Dec 31 '15 at 17:20
  • I want to append this iE.append(" "); its working fine but , angularjs ng-click() is not working. Actually, I want append in view which is again append the same html elements. – Harjeet Singh Dec 31 '15 at 17:20

2 Answers2

0

Never manipulate the DOM in Angular if it can be avoided (except if you're in a directive). Instead of using querySelector and angular.element, you should use an ng-repeat directive tag inside of your #med2 tag in your HTML (and you could probably remove the id if it isn't used elsewhere). This ng-repeat tag would include the HTML that's current in your JavaScript string (which should not be in your JavaScript source anyway). Then, when appendContent is called, instead of appending HTML to the element directly, you should append an object to an array that represents the underlying data controlled by ng-repeat.

Nick McCurdy
  • 17,658
  • 5
  • 50
  • 82
0

use :

$scope.appendContent = function() {

$scope.$apply(function () {

    var iEl = document.getElementById('med2');
    iEl.append('content')

});

}

shaxawan mhammad
  • 1
  • 1