Как отобразить html с помощью шаблонов angular

Это мой шаблон

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

и это мой шаблон просмотра

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

{{stuff.content }}

Теперь я получаю content как html, и я хочу отобразить это в представлении.

но все, что я получаю, это raw html-код. как я могу сделать это как фактический html

Ответы

Ответ 1

Использование -

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

Вам нужно сообщить angular, чтобы не избежать этого.

Ответ 2

Для этого я использую настраиваемый фильтр.

В моем приложении:

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>

Ответ 3

Вы следите за документами Angular и используете $sce - $sce - это служба, предоставляющая услуги Strict Contextual Escaping для AngularJS. Вот документы: 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);
            })
      }
    }
});

Ответ 4

Так что, возможно, вы хотите иметь это в своем index.html для загрузки библиотеки, script и инициализировать приложение с представлением:

<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'
    });
});

Я не тестировал это, извините, если есть ошибка, но я думаю, что это угловатый способ получить данные