Question

我正在与DB工作，他们通过XML向我发送数据，并且根据他们指定的元素类型，我需要在视图中显示。

您将看到的代码是动态表

      <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>

这是我在控制器中的内容

    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"我在告诉应用，我收到的属性是否在索引处附带XX，然后显示一个按钮<button ng-if="isXX" ng-click="fillOpen()">...</button>但到目前为止，我还有一些道具一开始就跟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内容到你的视图......我假设元素和元素类型是你拥有的指令或其他东西。

使用 ngBindHtml

e.g：

        <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

AngularJS和XML，如何渲染呢？

1 个答案: