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>
Related
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>');
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>
I'm still fighting with simple things in Angular. I have jQuery and Backbonejs background, so please do not yell on me. I try hard to understand differences
I have HTML in which from rails is given ID of project as data-project-id:
<div data-ng-controller="ProjectCtrl as ctrl" data-project-id="1" id="project_configuration">
Is there any chance to get access to this attribute? I need it to my API calls...
To access an elements attributes from a controller, inject $attrs into your controller function:
HTML
<div test="hello world" ng-controller="ctrl">
</div>
Script
app.controller('ctrl', function($attrs) {
alert($attrs.test); // alerts 'hello world'
});
In your example, if you want to get data-project-id:
$attrs.projectId
Or if you want to get id:
$attrs.id
Demo:
var app = angular.module('app',[]);
app.controller('ctrl', function($attrs) {
alert($attrs.test);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" test="hello world">
</div>
In Angular world you should use directives to manipulate with DOM elements. Here a nice explanation how to get attribute value from custom directive (How to get evaluated attributes inside a custom directive).
But if you still want to get it's value from controller you are able to use jQuery as well $('#project_configuration').data('project-id')
Can I have in directive same thing as in lisp macro, where I can access source html inside a element and based on it's html create new html that will be injected into the DOM?
And I get access to the html inside and create new template based on that html.
Is html -> html transformation is possible in Angular? From what I read it's not, but maybe there is some advanced use of the framework that will allow for this.
For instance I have code like this:
<directive>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</directive>
and what output:
<directive>
<ul>
<li ng-hide="some-logic">Foo</li>
<li ng-hide="some-other-logic">Bar</li>
</ul>
</directive>
So what I need is template function that will get html as argument and return template that will have angular code.
template: function(source_xml) {
return source_xml.find('li').each(function() {
$(this).attr('ng-hide', '<SOME LOGIC>');
});
}
There is a way to use $compile inside transclude function, but I'm not quite sure how to use it and if it will work as think.
How to use ngModel to bind an input control with JavaScript after AngularJS's bootstrap?
I tried to add ng-model attribute by setAttribute method, but it didn't work!
function FormController($scope) {
$scope.name="OK";
$scope.createBind=function(){
var texteditor=document.getElementById("test");
if(texteditor.getAttribute("ng-model")==null){
texteditor.setAttribute("ng-model","name");
$scope.$apply();
}
}
}
<input type="text" id="test">
<button ng-click="createBind()">Bind</button>
Angular don't get changes if you make them via javascript or jquery or etc...
You should call $scope.$apply() to get such changes manually...
Here is a good article for you to understand $scope.apply()...