javascript - AngularJS和XML，如何渲染呢？

Question

我正在与数据库人员一起工作，他们通过 XML 向我发送数据，并且根据他们指定的元素类型，我需要在 View 中显示内容。

您将看到的代码是一个动态表格

      <table>
        <thead>
          <tr>
            <th ng-repeat="column in cols">
              <span>{{column}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rows">
            <td ng-repeat="column in cols"
                ng-init="isXX = column.indexOf('XX') === 0">
              <span ng-if="!isXX">{{row[column]}}</span>
              <button ng-if="isXX" class="btn btn-xs btn-blue"
                      ng-click="fillOpen()">
                  {{column.substring(3).replace('_', ' ')}}
              </button>
            </td>
          </tr>
        </tbody>
      </table>

这是我在 Controller 中的内容

    ReportsFactory.pendingBets(reportParam).then(function(data) {
      if (data.length) {
        gridInfo = _.forEach(data, function(item) {return item;});
        $scope.rows = gridInfo;
        $scope.cols = Object.keys($scope.rows[0]);
      }
    }

正如你在这里看到的，我有这个 ng-init

ng-init="isXX = column.indexOf('XX') === 0"我告诉应用程序，我收到的属性(property)是否带有 XX在索引处，然后显示一个按钮 <button ng-if="isXX" ng-click="fillOpen()">...</button>但到目前为止，我还有更多的 Prop XX一开始，所以我需要做得更有活力。

这就是我目前的看法

我需要知道的是如何读取该 XML，这是 Nodejs 终端中打印的 XML

[{ BET: 57635034,
  CUSTOMER: 181645,
  SPORT: 'NFL',
  'XX_FILL OPEN': '<element><element_type>WAGER_ACTION_BUTTON</element_type><element_call>fillOpen(57635034)</element_call><element_content/></element>',
  XX_VIEW: '<element><element_type>BASIC_DROPDOWN</element_type><element_call>callThisFunction()</element_call><element_content><li>1</li><li>2</li><li>3</li><li>4</li></element_content></element>',
  XX_CANCEL: '<element><element_type>BASIC_CHECKBOX</element_type><element_call/><element_content>1</element_content></element>'
}]

所以，第一个说

'XX_FILL OPEN': '<element><element_type>WAGER_ACTION_BUTTON</element_type><element_call>fillOpen(57635034)</element_call><element_content/></element>'

WAGER_ACTION_BUTTON应该是一个按钮

第二个说

BASIC_DROPDOWN这应该是一个下拉列表等等，那么，我应该如何做才能根据 XML 的内容显示正确的 HTML 元素？

有什么建议吗？

Answer 1

如果我理解正确的话，你想动态地将 xml 或 html 内容渲染到你的 View 中...我假设元素和元素类型是你拥有的指令或其他东西。

使用 ngBindHtml

例如:

        <div class="col-xs-offset-1 m-r-offset-8 p-t-offset-2 font-l-16">
        <span mathjax-bind ng-bind-html="question.question.body"></span>
    </div>

或者您可能需要使用 trustAsHtml 函数

        <div class="col-xs-offset-1 m-r-offset-8 p-t-offset-2 font-l-16">
        <span mathjax-bind ng-bind-html="trustAsHtml(question.question.body)"></span>
    </div>

$scope.trustAsHtml = function (val) {
    return $sce.trustAsHtml(val);
};

这将获取您的字符串 xml (html) 代码并呈现它...您始终可以构建个性化指令并使用 $compile ，如下所示:

app.directive('ngHtmlCompile',function ($compile) {
      return function(scope, element, attrs) {
          scope.$watch(
            function(scope) {
               // watch the 'compile' expression for changes
              return scope.$eval(attrs.ngHtmlCompile);
            },
            function(value) {
              // when the 'compile' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
});

在代码中只需调用 ng-html-compile...不需要 $sce