AngularJS ng-click()在控制器中的.append(‘')函数的动态调用中不起作用

Question

我正在尝试动态地追加具有AngularJS ng-click的enter image description here元素，但它不起作用。我在iEl.append(<div>{{2+2}}<div>)中尝试过{{2+2}}，但它不起作用。

我做错了什么？

$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>');
};

我想像这样的html视图，自动追加当任何时候填充值。

Answer 1

如果可以避免的话，永远不要在Angular中操作DOM (除非你在一个指令中)。与使用querySelector和angular.element相比，您应该在您的HTML中的#med2标记内使用ng-repeat指令标记(如果id不在其他地方使用，则可以将其删除)。这个ng-repeat标记将包括JavaScript字符串中当前的ng-repeat(无论如何，它都不应该出现在JavaScript源代码中)。然后，在调用appendContent时，您应该将一个对象附加到表示由ng-repeat控制的基础数据的数组中，而不是直接将其附加到元素。

Answer 2

使用：

$scope.appendContent =函数(){

$scope.$apply(函数() {

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

})；

}