I am using django as backend and react as frontend, I am using tinymce to create description in django-admin page , But react is displaying description content with html tags
Ouput:
<p>Best Cough Syrup</p>
I used dangerouslySetInnerHTML but page is not loading any content
<div dangerouslySetInnerHTML={product.description} />
Is there any way to solve this issue
Try this:
{
<div
dangerouslySetInnerHTML={{__html:product.description}}
>
</div>
}
I have a simple app created using CRA v2 that provides a "load more" button after lists of posts. The default posts displayed on the page are generated server-side based on a set of criteria (ie. specific post type, taxonomy terms, etc), and the "load more" button queries an API to display more posts that match the same criteria.
My pages will have an undefined (but >1) number of post lists on a page, and not all of the lists will be nearby each other, so the whole thing can't exist in a single app. I need to be able to render the app more than once per-page and have them operate independently.
Best case scenario, I'd be able to do something like this:
<ul class="posts posts--foo">[first list of posts from the "foo" post type go here]</ul>
<div id="app-root" data-post-type="foo"></div>
<ul class="posts posts--bar">[second list of posts from the "bar" post type go here]</ul>
<div id="app-root" data-post-type="bar"></div>
<script src="main.7a3cc682.js"></script> <!-- built script-->
I realize this won't work as written. Is this possible, and if so what's the best way to make this work?
I was able to find a solution using the answer to this question. Here's what it looks like:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import render from 'react-dom';
import App from './App';
window.mount = function(id) {
let app = document.getElementById(id);
ReactDOM.render( <WPLoadMore {...(app.dataset)} />, document.getElementById(id) );
}
and then in my HTML:
<script src="build/static/js/main.7a3cc682.js"></script>
<ul class="posts posts--foo"></ul>
<div id="app1" data-post-type="foo"></div>
<script type="text/javascript">mount("app1");</script>
<ul class="posts posts--bar"></ul>
<div id="app2" data-post-type="bar"></div>
<script type="text/javascript">mount("app2");</script>
The only slightly wonky bit about this is that in the index.html in my public directory, I needed to move the mount() outside of the </body> tag so that it loads after all of the React scripts, like so:
</body>
<script type="text/javascript">mount("wplm");</script> <!-- included outside the body so this works in development -->
</html>
The problem is this: I bring the HTML from MongoDB and charge it in react with: <div dangerouslySetInnerHTML = {{__html: products.content.title}} />. It is displayed correctly. Now, what I want is that in the HTML that I load, I can have variable settings like for example: <h2> {{product.title}} </ h2> and that when loading them from the database, React I get them correctly . I am loading the HTML in React with the webpack loader 'html-loader'. Any ideas?
I'm new to AngularJS. In our project, we're forced to create our web app(multi-pages) in angularJS, though we know AngularJS is only for SPA.
At the moment I've a homepage, which is created in AngularJS and all other connected pages are in jQuery.
I've created a navBar in the Homepage, which needs to show up on all other pages as well.
But at the moment the navBAr data is not showing up in the other pages.
How could I do that?
How do I reuse my navCtrl in all the pages?
Please note that footer is still in jQuery, and will have to do the same with that as well.
This is how my homepage looks as of now:
<body ng-app="App">
<nav ng-controller="navCtrl"></nav>
<main ng-controller="mainCtrl"></main>
<footer></footer>
</body>
I would like to create master page, that is main page which will be used in all views of the application.
For example, Left navigation and top men navigation. This navigation should be displayed in all the views, whenever url changes in application.
As per ng-view, it only renders given partial view and replace previous view. In the image above all my left and top navigation should be displayed by using angular Controller.
Controller code
angular.module('modelDemo').controller("authCtrl", ['$scope', function($scope) {
$scope.list;
}]);
Please let me know, how can i achieve this
You can use angular-route or Angular-ui-router, and setting your master, following this steps:
Step 1. Make your index.html your master page.
Step 2. Add the <header>, <footer>, <aside>, <div>, etc. referencing your templates by using ng-include
NOTE: your left and top navigation will be part of it
Step 3. The content of the view will be rendered using the directive attribute ng-view or ui-view
Step 4. Use your module app.config() to configure the children pages
Source:
using Angular Route: https://docs.angularjs.org/tutorial/step_07
template for a brand-new app: https://github.com/angular/angular-seed
using Angular UI Router: Angular Tutorial 30 mins
ng view should be able to do that just fine. Keep your top navigation / left navigation html intact and use ng view for the various display area. http://docs.angularjs.org/api/ng.directive:ngView
To use the controller from the top navigation inside ng-view you can use $parent to get access to that scope : https://stackoverflow.com/a/14700326/390330
Fiddle for parent scope : http://jsfiddle.net/ezhrw/2/
<button ng:click="$parent.letter = greek">Assignment expression {{ greek }}</button>
I was trying to create the same concept, but needed a way to define placeholders. I started experimenting in Plnkr.co and thus far, I resorted to using a LayoutManager that drives itself from settings within the routeProvider object.
Here is an example: http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/
You'll see an example of how multiple routes use the same header and footer, I did not include an example with a sidebar.
Let me explain the LayoutManager.
I wanted to have placeholders that could be overridden. In this example, I have a toolbar that contains a title and provides a space to the right of the title for additional toolbar items. This gives views an opportunity to throw in additional functionality.
All of this is driven by the LayoutManager. The LayoutManager is a service that reads layout properties set on the $routeProvider. I wanted to implement this in a way keep things clean and self contained, per route. The LayoutManager is injected into the toolbar directive. The toolbar directive drives it's scope properties of the LayoutManager.
In turn, the LayoutManager has a dependency on the routeProvider as well as the rootScope $routeChange event.
I'm very new to Angular, open to suggestions.
I could not see any problem, if you are using bootstrap then use can easily divide your screen as you want
<div class="row">
<div class="col-lg-3">
Left panel
</div>
<div class="col-lg-9" style="border:1px solid #999; overflow-y:auto">
<div> Top Banner </div>
<!-- Main view to render all the page -->
<div ui-view> </div>
</div>
</div>
If you want complete demo and code on then see this link
Edited: 3 Nov. 2016:
If you are using ui-router then we can user abstract state to create different master pages.
You don't need to play show/hide, ng-if but just define the routing properly with you master pages and child pages
Better to see the detail
I know this is an old thread, but thought it should be noted that as of Angular 1.5+ we have been introduced to components. Instead of dealing with routes with named views and all that nonsense or using ngInclude you should be using a header component and footer component. Simply add these to your index.html (or whatever you call your master html template) and voila.
For example (this is using Angular Material and is missing the layout module but hopefully you get the point)
1. Added to index.html
<layout-header></layout-header>
2. header.component.js (you don't need all of this but I think it's helpful)
(function () {
'use strict';
angular
.module('layout')
.component('layoutHeader', {
templateUrl: 'layout/header.html',
bindings: {},
controller: Controller
});
Controller.$inject = [];
function Controller() {
var ctrl = this;
initialize();
////////////////////
function initialize(){
}
}
}());
3. header.html
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Really Awesome Title!!!!</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="More">
<md-icon class="material-icons">more_vert</md-icon>
</md-button>
</div>
</md-toolbar>