动态 Angular Js 无法通过 innerHTML 工作

Question

如果我用 Dynamic Angular JS 变量添加一行，它不起作用。下面是我的代码。请帮助我了解问题。

另请注意，我的原始代码中的内部 HTML 有 600 行长。在这个例子中，我使用了简单的 div 来简化。

<div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>

<!DOCTYPE html>
<html>
<head> 

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
 
});

</script>
  <script>
var app = angular.module('myApp1', []);
app.controller('AppCtrl', function($scope) {
 
 angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});
 
});


function replicateRegion() {
         
         var table = document.getElementById("idTable");
           var lastRow = table.rows.length;

           var row = table.insertRow(lastRow);

           var cell1 = row.insertCell(0);
           
         var sHTML =document.getElementById("idTableTD1").innerHTML;
         sHTML=sHTML.replace("_r", "_r" + lastRow.toString());
         sHTML=sHTML.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
            cell1.innerHTML = sHTML;
         
        }

</script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button onclick="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">

  
 <div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>
  
 
</td></tr>

</table>

</div> 
</body>

</html>

只有静态的第一行有正确的输出。单击按钮 "Insert Row" 后添加的行具有有问题的 Angular JS 输出。请帮忙。

Answer 1

当您手动添加标记时，例如

document.getElementById('idTableTD1').innerHTML= '<div dynamic></div>'

您正在绕过所有 AngularJS 代码。你应该这样做：

angular.element("#idTableTD1").html('<div dynamic></div>');

也许这会有所帮助。

Answer 2

您需要在AngularJS控制器中添加replicateRegion()函数的代码，并使用$compile服务将动态生成的HTML绑定到AngularJS DOM。

var myapp = angular.module('myApp', []);

myapp.controller('AppCtrl', function ($compile, $scope) {
 
   
    $scope.a = 1;
    $scope.b = 2;
    $scope.replicateRegion = function(){
      var table = document.getElementById("idTable");
      var lastRow = table.rows.length;

      var row = table.insertRow(lastRow);

      var template = `<div data-ng-init="quantity_r=1;price_r=5">
               <h2>Cost Calculator Quantity:</h2>
               <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
             <div>
            Total in dollar: {{quantity_r * price_r}}
             </div>
             </div>`;
  
           var cell1 = row.insertCell(0);
         
         template=template.replace(/_r/g, "_r" + lastRow.toString());
         template=template.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
            cell1.innerHTML = template;
          $compile(cell1)($scope); //Now compile it to render the directive.  
    }
        
            
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">

  
 <div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>
 </div>
  
 
</td></tr>

</table>

</div>

另请注意，var template 指定了一个通用模板，该模板应在单击时动态插入到 HTML 中。最好指定一个静态 HTML 模板，而不是从页面中提取生成的 HTML 并使用它，您已经这样做了。

动态 Angular Js 无法通过 innerHTML 工作

Dynamic Angular Js Not working via innerHTML

dynamic

innerhtml

angularjs