68

これは私のテンプレートです：

<div class="span12">
  <ng:view></ng:view>
</div>

これは私のビューテンプレートです:

<h1>{{stuff.title}}</h1>

{{stuff.content}}

as html を取得してcontentいて、それをビューに表示したいのですが、取得しているのは生の html コードだけです。その HTML をレンダリングするにはどうすればよいですか?

4

5 に答える 5

100

使用する-

<span ng-bind-html="myContent"></span>

angular にエスケープしないように指示する必要があります。

于 2013-04-02T01:14:53.873 に答える
50

これを行うには、カスタム フィルターを使用します。

私のアプリでは：

myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

次に、ビューで:

<h1>{{ stuff.title}}</h1>

<div ng-bind-html="stuff.content | rawHtml"></div>
于 2014-08-26T07:31:55.107 に答える
3

Angular のドキュメントに従い、$sce を使用する必要があります。$sce は、AngularJS に Strict Contextual Escaping サービスを提供するサービスです。ここにドキュメントがあります：http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

Eventbrite ログイン ボタンを非同期にロードする例を見てみましょう。

コントローラーで:

someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin', 
  function($scope, $sce, eventbriteLogin) {

    eventbriteLogin.fetchButton(function(data){
      $scope.buttonLogin = $sce.trustAsHtml(data);
    });
  }]);

ビューに次を追加するだけです：

<span ng-bind-html="buttonLogin"></span>

あなたのサービスで：

someAppServices.factory('eventbriteLogin', function($resource){
   return {
        fetchButton: function(callback){
            Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
                callback(widget_html);
            })
      }
    }
});
于 2013-11-23T14:42:25.207 に答える
2

したがって、ライブラリ、スクリプトをロードし、ビューでアプリを初期化するために、これを index.html に入れたいと思うかもしれません:

<html>
  <body ng-app="yourApp">
    <div class="span12">
      <div ng-view=""></div>
    </div>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="script.js"></script>
  </body>
</html>

次に、 yourView.html は次のようになります。

<div>
  <h1>{{ stuff.h1 }}</h1>
  <p>{{ stuff.content }}</p>
</div>

scripts.js は、コントローラーにデータ $scope'd を持たせることができます。

angular.module('yourApp')
    .controller('YourCtrl', function ($scope) {
      $scope.stuff = {
        'h1':'Title',
        'content':"A paragraph..."
      };
    });

最後に、ルートを構成し、コントローラーを割り当てて、その $scope (つまり、データ オブジェクト) を表示する必要があります。

angular.module('yourApp', [])
.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/yourView.html',
      controller: 'YourCtrl'
    });
});

私はこれをテストしていません。バグがある場合は申し訳ありませんが、これはAngularishのデータ取得方法だと思います

于 2013-10-06T10:34:51.797 に答える