This question already has an answer here:
Unable to load url into iframe via AngularJS controller
(1 answer)
Closed 8 years ago.
I am attempting to set the ng-src of an iframe using a scope variable and it keeps coming through as blank.
I tried this:
<div ng-repeat="url in urls">
<div ng-click="testAlert(url.domain)">
<iframe ng-src="{{ url.domain }}" ></iframe>
<div style="text-align: center">{[ url.domain ]}</div>
</div>
</div>
The text shows up just fine, so I know the values are there as well as the click alerts the select domain. It is just the ng-src seems to end up blank and therefore doesn't pull up the site. If I hard code the ng-src to an external site it works.
Most likely has to do with $sce not being configured to trust the external resource when interpolated... Try putting this in your controller (be sure to inject $sce service). trustAsResourceUrl is the method you will be interested in and you would pass the URL you want to use to that:
.controller("MainController", function ($scope, $sce) {
var urls = [];
//Need to trust resource to be able to interpolate, see $sce documentation
urls.push({domain: $sce.trustAsResourceUrl("http://angularjs.org")});
urls.push({domain: $sce.trustAsResourceUrl("http://www.jquery.com")});
$scope.urls = urls;
$scope.testAlert = function (value) {
alert(value);
}
});
See working fiddle.
Related
I have some values as amount like 1000, 2000, <b>3000</b>, <4000>, <b>5000</b> inside JSON as an API response. I want to render this response inside a table. So I tried ng-bind-html. BUT it is showing only the value which are having tags like 3000,5000. I want to show all values , 1000,2000,4000 as a plain string and 3000,5000 in BOLD/or any other HTML tag.
angular.forEach($scope.arr2.test,function(item)
$scope.res=$sce.trustAsHtml(item.amount);
return $scope.res;
});
On HTML side, I have something like this
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
You can use ng-bind-html and ng-bind-html-unsafe for this. But please be mindful of the security concerns here.
You can find more details here
Do make sure you sanitize your strings, to prevent security vulnerabilities
First of all you need to download the ng-sanitize js
https://docs.angularjs.org/api/ngSanitize
and then inject ng-sanitize to angular module.
then you can use ng-bind-html and ng-bind-html-unsafe
you can use ng-sanitize module for the same - see here
var app = angular.module("myApp", ['ngSanitize']);
I want to show messages to the end user, just like Google, at the top center of the web panel.
I don't want to include the HTML and related script everywhere in every form and list and chart that I have. I want to centralize this messaging functionality into a service (in Angular JS term) that can be used everywhere.
And just like Google, I want to be able to show rich text in my messages, that is, I want to include links and probably other HTML stuff there. For example instead of showing Customer is defined, I want to show Customer is defined, <a href='#/customer/addPhone'>Now add a phone</a> to guide the user.
What I've done is to place the messages HTML in the root layout of my single paged application:
<div class="appMessages">
<span ng-show="message" ng-click="clearMessage()" ng-bind-html="message"></span>
</div>
and in our controllers, we inject the $rootScope and try to set the message property on it.
Yet I get no results. Can you guide me please?
As a general best practice I would avoid using $rootScope to pass the messages but rather use a dedicated service to update the message,
On your case the problem might be that you need to use angular $sce service to mark your html as trusted.
or load ng-santizemodule instead (which is a seperate module you need to load see offical doc)
That is needed because angular security requires you to explicitly check the html, if the source of your messages are from your code only, and not users inupts you can use the trustAsHtml as you know for sure it a safe html.
On your controller inject $sce, and bind it to your scope, and then use the $sce.trustAsHtml(value) function.
<div class="appMessages">
<span ng-show="message" ng-click="clearMessage()" ng-bind-html="$sce.trustAsHtml(message)"></span>
</div>
angular.module('app', [])
.component('message', {
controller: function($sce, messagService){
this.messagService = messagService;
this.$sce = $sce;
},
template: '{{$ctrl.message}}<div ng-bind-html="$ctrl.$sce.trustAsHtml($ctrl.messagService.message)"></div>'
})
.service('messagService', function(){
this.message = '';
this.updateMessage = function(message){
this.message = message;
}
})
.controller('mainCtrl', function($scope, messagService){
$scope.updateMessage = function () {
messagService.updateMessage('wow <b style="color:yellow;">shiny</b> message');
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="mainCtrl" ng-app="app">
<message></message>
<button type="button" ng-click="updateMessage()"> update message</button>
</div>
This question already has answers here:
Insert HTML into view from AngularJS controller
(17 answers)
Closed 7 years ago.
Actually im searching about how i can transform my variable into Html, this variable contain a embed code from instagram.
in my controller
instaembed.controler "instaCtrl", ($scope, $http) ->
#instagram embed get example from insta
$http.get ("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/")
.success(data) ->
$scope.html = data.html
...
the result in $scope.html contain a blockquote with many div and image
i've tested it in the view (with ngsanitize), but it show only the text and not the image.
Anyone have an idea about how to get it ? :D
thank you (sorry for my english).
You will have to use Angular's built in Strict Contextual Escaping $sce
$sce Documentation
Then, in your controller:
instaembed.controler "instaCtrl", ($scope, $http, $sce) ->
#instagram embed get example from insta
$http.get ("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/")
.success(data) ->
$scope.html = $sce.trustAsHtml(data.html);
...
You need to use ngBindHtml directive.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
<div ng-bind-html-unsafe="html"></div>
Where html is your $scope.html variable. This will render inside div what your variable contains.
function testCtrl($scope) {
$scope.html = "<strong>Hello world!</strong>"
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="testCtrl" ng-app>
<div ng-bind-html-unsafe="html"></div>
</div>
You should use ng-bind-html
<span ng-bind-html="your scope variable"></span>
I have built a wordpress plugin where users can insert the google map code like this one:
<iframe src="https://www.google.com/maps/embed?pb=xxxxx" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
this code is stored in wp-database and I try to get it from inside my angularjs code..
getMaps();
function getMaps(){
$http.post("wp-content/themes/koplan/pages/getMaps.php").success(function(mapsdata){
$scope.maps = mapsdata;
});
};
My question is: How can I bind/render the iframe in front-end php/html? I've tried <div ng-bind-html=maps> but nothing showed up.
Is there anyother way?? Please help me, Thanks
Probably what you need is sce since I guess your iframe is not accepted as a trusted HTML.
So, after including sce into your controller like
app.controller("MainController", ['$scope', '$http','$sce', function($scope, $http, $sce){
, you would do
$scope.maps = $sce.trustAsHtml(mapsdata);
See this question/answer also.
Also, for other HTML data that you are sure are 'safe' to display, you can use this filter:
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
You can use it with
ng-bind-html="yourHTMLdataVariable | unsafe"
i've a tiny problem.
I'd like to show icons from categories i get from my rest api.
To do, i use rest angular which gives me icons as designed.
My problem, is a firebug alert:
"NetworkError: 404 Not Found - http://localhost:8888/app/%7B%7Bc.icon%7D%7D"
This is because my template is laded before api response.
<ul class="col-md-9 inner">
<li ng-repeat="c in categories"><img src="{{c.icon}}" alt="{{c.name}}" ng-cloak></li>
</ul>
This is the piece of corresponding code in my controller
Category.getList().then(function(categories) {
$scope.categories = categories;
});
As you can see, i've try to work with ng-cloak, i've also tried to play with ng-show="categories" but nothing more.
How can i avoid this behavior and load ng-repeat only when categories variable is populated ?
instead of
<img src="{{c.icon}}" alt="{{c.name}}" ng-cloak>
you should use ng-src:
<img ng-src="{{c.icon}}" alt="{{c.name}}">
From ngSrc documentation:
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.