3

タイトルで述べたように、ng-bind-html を使用してパーシャル内で html をレンダリングする方法がわかりません。

ここに説明するプランカーがあります。

http://plnkr.co/edit/YFfHsahcum7XA8GcH6b2?p=preview

ng-bind、ng-bind-html、$sce.trustAsHtml、{{HTMLString}} の組み合わせをいくつか試しましたが、どれもうまくいきませんでした。たぶん、まったく違うものを見逃していますか？

どんな助けでも大歓迎です！ありがとうございました

4

3 に答える 3

4

これは、アイテム Aの作業中のプランカーです。

ItemCtrlのテンプレート内のみ移動しましたng-include。主な問題は、スコープ外へのアクセスだったと思います。

テンプレートは次のとおりです。

Item A: 
<div ng-bind-html="trustedContent" ng-controller='ItemCtrl'></div>
于 2013-11-09T22:21:22.653 に答える
3

修正: http://plnkr.co/edit/7qd3INmYAmUfJPluwfem?p=preview

  <div ng-controller='ItemCtrl'>
    <div ng-switch on="item.type">

        <div ng-switch-when="A">
            <div ng-include='"item_A.html"' ></div>
        </div>

        <div ng-switch-when="B">
            <div ng-include='"item_B.html"'></div>
        </div>

    </div>
  </div>

ItemCtrl定義ng-switchを andの外に移動しましたng-include。directivesあいまいな優先順位を一緒に混在させることは常に賢明ではありません:ng-include親スコープから継承されたスコープを作成していましたが、 のスコープはcontroller別のままでした。

コントローラーのスコープを親スコープにすることで問題が解決しました。

于 2013-11-09T22:24:20.180 に答える
2

別の方法：

index.html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script data-require="angular.js@1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
  <script data-require="angular-sanitize@*" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular-sanitize.min.js"></script>
  <style>
    .ac {
      background-color: yellow;
    }
    .bc {
      background-color: orange;
    }
  </style>
  <script>
    var app = angular.module('plunker', ['ngSanitize']);
    app.controller('MainCtrl', function($scope) {
      $scope.items = [{
        "type": "A",
        "url": "item_A.html",
        "content": "<div class=\"ac\">content A</div>"
      }, {
        "type": "B",
        "url": "item_B.html",
        "content": "<div class=\"bc\">content B</div>"
      }]
    });
  </script>
</head>

<body ng-controller="MainCtrl">

  <div ng-repeat="item in items">
    <div ng-switch on="item.type">
      <div ng-switch-when="A">
        <div ng-include="item.url"></div>
      </div>
      <div ng-switch-when="B">
        <div ng-include="item.url"></div>
      </div>
    </div>
  </div>

</body>

</html>

item_A.html:

Item A: 
<div ng-bind-html="item.content"></div>

item_B.html:

Item B: 
<div ng-bind-html="item.content"></div>

プランカーの例

于 2013-11-09T22:49:45.367 に答える