Question

我有一个角度应用程序，它通过json将数据提交给PHP应用程序。此应用程序向angular app返回一个响应对象，该对象具有renderedTable属性和quote属性。

renderedTable属性是批量的HTML文本，其中包含角度{{expression}}＆＃39; s。此表中嵌入的<input>标签也与其他提到的属性引用中的ng-models绑定。

Quote只不过是一个数据类，其中包含各种属性。我正在尝试使用ng-bind-html来显示html代码（并且确实如此），但是，我有2个问题要解决。

第一个问题是我无法正确渲染html，如果我使用$ interpolate，我会从quote对象中获取值，但<input>标记被过滤掉（这是必要的），并且＆＃39;我不清楚定义的绑定点是动态的还是基于$ interpolate返回一个字符串的事实。

我尝试创建自己的unsafe指令，但这导致了与ng-bind-html相同的输出。如何让我的ajax返回HTML根据返回的对象填充和动态更新，并保持页面中的所有输入字段，并使用ng-model正确绑定？

我的代码（摘录）：

 ...ajax call this is the meat of the function
 if (response.success)
 {
    $scope.crmquote = response.data.crmquote;
    $scope.quoteTable = response.data.crmtable; //this is where I initally applied $interpolate but realized it wasnt what I was looking for
    console.log($scope.quoteTable);
 }

 //this is the function I have setup to try to get angular to "trust" the html and not strip the <input> tags but it doesn tseem to work
 $scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
 }

//this is the directive I attempted to use to achieve the desired result
 .directive('bindUnsafeHtml', ['$compile', function ($compile) {
  return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
           return scope.$eval(attrs.bindUnsafeHtml);
        },
        function(value) {
          element.html(value);
 $compile(element.contents())(scope);
        }
    );
 };
 }]);

这些是我尝试的HTML代码片段：

<div ng-bind-html='to_trusted(quoteTable)' ng-show="editIF == false">

<div bind-unsafe-html='quoteTable' ng-show="editIF == false">

这是quoteTable的内容：

<table class="table table-bordered table-striped"><thead><tr><th>Description</th><th>Qty</th><th>Rate</th><th>Total</th></tr></thead><tr><td>Monthly Rent for 16'</td><td>1</td><td>$ <input type='text' ng-model='crmquote.rr16'/></td><td>$ {{crmquote.rr16 * crmquote.rr16units | number:2}}</td></tr><tr><td>Initial Delivery</td><td>1</td><td><a href='#' editable-text='crmquote.initialdelivery'>$ {{crmquote.initialdelivery}}</span></td><td>$ {{crmquote.initialdelivery * crmquote.units | number:2}}</td></tr><tr><td>Final Pickup</td><td>1</td><td><span id='editrate'>$ {{crmquote.finalunit}}</span></td><td>$ {{crmquote.finalunit * crmquote.units | number:2}}</td></tr><tr><td colspan=3 style='text-align:right'><b>Sub-Total</b></td><td id='subtotal'>$ {{crmquote.total | number:2}}</td></tr><tr><td colspan=3 style='text-align:right'><b>Taxes (8.50%)</b></td><td id='taxes'>$ {{crmquote.tax | number:2}}</td></tr><tr><td colspan=3 style='text-align:right'><b>Total Due On Delivery</b></td><td id='total'>$ {{crmquote.grandtotal | number:2}}</td></tr></table><br><table class="table table-bordered table-striped" style="margin-bottom:0;"><tr><td colspan=2><b>Estimated Future Costs</b></td></tr><tr><td>Additional Monthly Rent for 16' </td><td>$ {{crmquote.rr16 | number:2}} each</td></tr></table>

非常感谢任何帮助！

Answer 1

来自文档：

var ngBindHtmlDirective = ['$sce', function($sce) {
  return function(scope, element, attr) {
    scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
      element.html(value || '');
    });
  };
}];

- https://docs.angularjs.org/api/ng/service/$sce#how-does-it-work-

如何让HTML正确绑定到角度应用程序

1 个答案: