While using ngsanitize. It displays only html without css applied.
For example:
The above image should be the output but using ngsanitize ,it displays only the text
What could be added with ngsanitize to display elements with proper css.
<p ng-bind-html ="the text to be displayed(test video)"></p>
if i understood your question correctly, fiddle
you can use $sce.trustAsHtml(), to use inline style directly into the html string, you could do it like this, controller:
$scope.trustAsHtml = function(string) {
return $sce.trustAsHtml(string);
};
And in HTML
<div data-ng-bind-html="trustAsHtml(htmlString)"></div>
Please try with $sce. Before binding it to the scope variable that you use for ng-bind-html. An example below
<p ng-bind-html ="styledHTML"></p>
And in your controller
$scope.styledHTML = $sce.trustAsHtml('<span style="background-color: cyan;">test video</span>');
Related
I have a problem I have created a directive which is doing ng-repeat on an array of objects
---Showing the value on gui------
Now I want that if I click on any div of this repeat that particular div's background color should change
I have tried something like this
link:function(scope,element,attributes){
$(element).on('click',function(e){
$(element).addClass('A');
$(element).removeClass('B');
})
}
You can use the ng-class directive to apply classes on specific occurences, in your case in combination with the ng-click:
<div ng-repeat="item in items"
ng-class="{A: item.clicked, B: !item.clicked}"
ng-click="item.clicked = !item.clicked">
<!-- .. content -->
</div>
See this jsfiddle for example
You can try something like this, but this will need more workaround.
<div ng-click=“changeBackground($event)”></div>
// In Controller
$scope.changeBackground = function(event){
event.target.style.background = “#000”;
}
It would be better if you can submit your code.
I have scope variable.like
$scope.demo='<h1>This is test</h1>';
I can bind html using ng-bind-html like
<p ng-bind-html="demo"></p>
Its working fine but how can bind html inside {{ .. }}
You need to sanitize the html using $sce service, which needs ngSanitize module injected in your app.
Basically you need to allow html as trustAsHtml mehthod of $sce service.
Code
$scope.demo = $sce.trustAsHtml('<h1>This is test</h1>');
Better way
For making it more better you could create an custom filter and reuse that code
app.filter('trsustedhtml', function($sce) {
return $sce.trustAsHtml;
});
Markup
<p ng-bind-html="demo| trsustedhtml"></p>
ng-bind html only take the text, you have to remove the safe control
<p ng-bind-html-unsafe="demo"></p>
In Angularjs template is it possible to use ViewBag.Property in ng-show?
I set some viewbag in my controller/action like this
ViewBag.AllowExport = false;
when i tried following nothing happen
<div ng-show="#ViewBag.AllowExport">
Export
</div>
Above Div is still showing even if AllowExport = false;
Is my syntax is wrong here or we can not use Viewbag in ng-show?
Any advice
Try this:
<div ng-show="'#(ViewBag.AllowExport)'">
Export
</div>
You're mixing fron-tend (Angular/JavaScript) and back-end (Razor) code here. I would strongly advice against that. However if you really want to do that: the result in HTML will be which will just be a string to Angular.
This should work instead since Angular will validate the expression in {{}}:
<div ng-show="{{#ViewBag.AllowExport}}">
Export
</div>
Instead of mixing in Razor syntax in your Angular HTML code I would recommend using a scope variable being set from either some JSON source, or if you really want to mix in MVC data, setting the value in some Javascript configuration:
<script>
window.ClientConfig = {
allowExport: #ViewBag.AllowExport,
};
</script>
Then in your Angular controller simply use $scope.allowExport = window.ClientConfig.allowExport;
And in HTML:
<div ng-show="allowExport">
Export
</div>
This is a simple problem.
$scope.text = "<strong>this is text</strong>"
It outputs something like this
{{text}}
<strong>this is text</strong>
instead of
this is text
<span ng-bind-html="text"></span>
check for ng-bind-html directive
dont forget to add angular-sanitize.js file
https://docs.angularjs.org/api/ng/directive/ngBindHtml
I have tried to use a function to load the path to a template into an ng-include directive. I hoped that the argument to my function would render due to its insertion in ng-include. But it doesn't work. Here is what I have so far:
HTML:
<div ng-include="'{{content}}'"></div>
...
<div ng-click="showContent('views/my_content.html')">
Angular:
$scope.showContent = function(attrs){
$scope.content = attrs;
};
When I click on the div that has ng-click I can see that {{content}} has been replaced with the template path, but the template itself is not included (i.e., it is not rendered on the page). Is there a way that I can force the template to render?
Instead of this
<div ng-include="'{{content}}'"></div>
use this
<div ng-include="content"></div>
and the template would get rendered.
ng-include does not work like this.
What you need to do is either write another directive that will fetch and show content for you. You could also use $routeProvider to change the url and have it include a template URL.