I am trying to display the html tags from the data in the view.I have a data level which is $scope.level="<b>i should be bold</b>" and when the data is given in the template as given below should respect the html tag as well
<div ng-controller="MyCtrl" >
{{level}}
</div>
that is it should be bold without using
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>
But with what i have tried so far i am not able to achive it.It is also showing the tag in the view.The issue is illustrated in this JSFiddle Here.
Is there anyway to achieve it.or am i totally wrong here?
You can use the ngBindHtml directive which evaluates the expression and inserts the resulting HTML into the element. Don't forget to include the ngSanitize directive.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Example :
app.js
angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
$scope.data = '<b>my text</b>'
});
index.html
<div ng-controller="Controller">
<p ng-bind-html="data"></p>
</div>
You can use ng-bind-html-unsafe:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<div ng-bind-html-unsafe="level"></div>
</div>
Unsafe because the DOM should generally not be modified inside a controller.
Why can't you move the <b> tags to the markup and then just interpolate the value of 'level'?
http://jsfiddle.net/u37xtpjd/2/
You can accomplish this using the ng-bind-html directive:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<span ng-bind-html="level"></span>
</div>
Related
You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:
var titleSelector = $(`
<div>
<div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
<div class="jqx-scheduler-edit-dialog-field">
<div><v-select :options="options"></v-select></div>
</div>
</div>`);
fields.subjectContainer.append(titleSelector);
I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:
<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable">
<div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-
label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
...
</div>
</div>
My question is: How can I render this HTML and add it to the dialog?
I am using webpack and vue-router.
PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.
You have several options:
Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs
<body ng-controller="MainController as mainCtrl" ng-app="MyApp">
<div header page="'Test'" ></div>
<div id="main" class="app-body" ng-controller="MyController as ctrl">
<my-grid-list></my-grid-list>
</div>
</body>
I am trying to figure out how the header is constructed. I expect it to be something like
<header-bar></header-bar>. However, it gives header. Is it an attribute or some dialect of AngularJS syntax? This is AngularJS.
The header attribute is not a core directive in AngularJS. It could be a custom directive. Check the code for the app to see if it is defined there.
I found this.
MyApp.directive('header', function () {.
// ...
})
That is indeed a custom directive.
For more information, see
AngularJS Developer Guide - Creating Custom Directives
I am building a page preloader with ReactJS. The Codepen snippet I am using is written in HTML and I need help converting it into HTML ready for React.
Part of the snippet
<div class="socket">
<div class="gel center-gel">
<div class="hex-brick h1"></div>
<div class="hex-brick h2"></div>
<div class="hex-brick h3"></div>
</div>
</div>
Conversion to React
<div className={s.socket}>
<div className={s.gel s.center-gel}>
<div className={s.hex_brick s.h1}></div>
<div className={s.hex_brick s.h2}></div>
<div className={s.hex_brick s.h3}></div>
</div>
</div>
So I have replaced hyphens with underscores, used curly brackets instead of quotes, and added Name to the class. However, I don't know how to add the second div modifier (for example in div gel there is element center-gel). When a second element is added to a React div, it fails to compile.
React does not allow these second div elements. After testing, my loading animation does not look correct if I separate out the elements, the structure needs to stay the same.
Snippet Used
When you write JSX code in React you are actually writing JavaScript code. Let's say you put those expression into a variable like so:
var styles = s.gel s.center-gel;
It just doesn't make any sense in JS. You need to write a valid expression like this:
var styles = [s.gel, s['center-gel']].join(' ');
Keeping that in mind, your code should work this way:
<div className={s.socket}>
<div className={[s.gel, s['center-gel']].join(' ')}>
<div className={[s.hex_brick, s.h1].join(' ')}></div>
<div className={[s.hex_brick, s.h2].join(' ')}></div>
<div className={[s.hex_brick, s.h3].join(' ')}></div>
</div>
</div>
I am trying to change the value of a label in my HTML page on an event,is it possible to insert html code into the variable?
The HTML code is like:
<div ng-controller="welcomeCon" ><label>{{ welcomemsg }}</label></div>
and in some controller in the script:
$rootScope.welcomemsg="You are not logged in,please log in or register"
Is there a way to make the words log in and register to be links?
If no, I would be happy if someone could guide me what to do in alternative.
Thanks
Use $sce service. Here is the sample example
angular.module('app',[])
.controller("welcomeCon", function($scope,$sce){
$scope.loginHtml = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
$scope.trustedHtml = $sce.trustAsHtml($scope.loginHtml);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="welcomeCon">
<div ng-bind-html="trustedHtml">
</div>
</div>
OR you can use ngSanitize module
angular.module('app',["ngSanitize"])
.controller("test", function($scope){
$scope.html = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<div ng-app="app" ng-controller="test">
<div ng-bind-html="html">
</div>
</div>
You can do that as the other answers suggest by using the $sce service or ng-bind-html, but I would object to that approach because the links won't change, so why do it by defining the html in your code instead of in the html.
What you probably want is something like this:
<ul class="my-menu">
<li ng-if="$root.loggedIn">
Logout
</li>
<li ng-if="!$root.loggedIn">
You are not logged in, please login or register
</li>
</ul>
Use ng-bind-html directive to bind HTML to the model value. See link: http://www.w3schools.com/angular/ng_ng-bind-html.asp
You need to use ngSanitize module in your application. Include angular-santize.js file to do it.
I know you've already got your answer, but just to put this out there...
You can also do this using a very simple directive as like a child view, and avoid using $rootScope all together. This promotes reuse across applications, and follows angular's modular approach of breaking things down into small parts (in this case very small parts!).
welcomeMessage.js
app.directive('welcomeMessage', function() {
return {
restrict: "E",
templateUrl: "welcomeMessage.html"
};
});
welcomeMessage.html
<p>
You are not logged in, please
log in or
register
</p>
Sample Usage (in your index.html)
<welcome-message />
Sample Plunk
I use an editor to add comment and this content save as html in db. When I want to display it in page all html elements appear in out put. So I want to use this code to solve my problem but not solve it.
Here is my code
Data include {body, name, date} that body save as html
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html-unsafe="d.body">
<p>{{d.body}}</p>
</div>
</div>
</div>
In jsfiddle inside an question is using angular 1.1 in which ng-bind-html-unsafe is working.
But currently angular has deprecated ng-bind-html-unsafe from latest version, instead you need to use ng-bind-html then sanitize that url from the angular filter using $sce service and $sce.trustedAsHtml()
Filter
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
HTML
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html="d.body | sanitize">
<p>{{d.body}}</p>
</div>
</div>
</div>
For more info refer this SO answer