Это мой шаблонКак визуализации HTML с угловыми шаблонами
<div class="span12">
<ng:view></ng:view>
</div>
и это мой шаблон представления
<h1>{{ stuff.title}}</h1>
{{stuff.content }}
Теперь я получаю content как HTML и я хочу, чтобы отобразить, что в силу ,
но все, что я получаю, это код сырого html. как я могу вынести, что как фактический HTML
потребительных
<span ng-bind-html="myContent"></span>
Вы должны сказать угловатых не избежать.
Это опечатка - он имел в виду ' '. –
API изменился в AngularJS 1.2. http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – amccausl
amccausl спас новых угловых пользователей бесчисленное количество часов отладки из-за угловых «адских документов» ng-bind-html-unsafe устарел, и, пожалуйста, обратитесь к ссылке, расположенной в комментарии выше, чтобы решить ответ. – rjm226
Так может быть, вы хотите иметь это в 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..."
};
});
Наконец, вы должны будете конфиг маршрутов и назначить контроллер для просмотра на это $ объема (т.е. вашего объекта данных)
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
Я не проверял это, извините, если есть ошибка, но я думаю, что это угловатый способ получить данные.
Что делать, если я хочу такое же поведение, но не зависеть от routeProvider? –
Это же, используя пользовательский интерфейс-маршрутизатор, только это $ stateProvider вместо $ routeProvider и .state ('yourState', { URL: '/', templateUrl: 'yourView.html', контроллер: 'YourCtrl' }); – irth
Вы следите за Угловыми документами и используете $ sce - $ sce - это служба, предоставляющая услуги Strict Contextual Escaping для AngularJS. Вот документы: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe
Давайте возьмем пример с asynchroniously загрузки 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);
})
}
}
});
Для этого я использую настраиваемый фильтр.
В моем приложении:
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>
Где HTML приходит? В разных обстоятельствах вам понадобятся 'ngBindHtmlUnsafe',' ngSanitize' или настраиваемая директива. –
html исходит из моей базы данных – user194932147
Является ли содержание * абсолютно надежным? –