AngularJS ng-click（）无法通过控制器中的.append（''）函数进行动态调用

Question

enter image description here I 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.

Answer 1

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 .

Answer 2

use :

$scope.appendContent = function() {

$scope.$apply(function () {

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

});

}