I am dynamically loading the html content from an ajax request. This html has some buttons like
<button #click="someComponentMethod">Add</button>
As you can see I am trying to call components methods. But Its not working.
I think instead of #click html's default attribute "onclick" should work. But this will only recognize the function that are defined in global scope. Can someone guide me how I can call component's function from core javascript i.e using "onclick".
Update
Ok! I got it that v-html will not compile that html. But can you guys tell me how can I call component method from javascript (i.e outside of component scope). In this way I will be able to use onclick="JAVASCRIPT_CODE_TO_EXECUTE_METHOD".
That content will not be compiled as mentioned in official docs :
The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
Instead of loading html I end up saving component in JSON format. This component has a template property that stores the html string. In this way I am able to store and load component to and from database and it works without any issue.
Related
I want to pass server side data to React components without making async call.
I was wondering about building React app directly from my html page, something like what's written down here.
Is there a way to do something like this inside my html:
<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>
In other words I'm trying to mix html and react components inside react root element in my html view.
I hope I was clear
Thank you very much
React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for React.createComponent(...). Even though React.createComponent(...) could be used in HTML within <script>, it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application.
Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.
If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:
<script>
window.__APP_DATA__ = {/* provided in server-side template */};
</script>
And be used inside an application as window.__APP_DATA__.
React component is pulling HTML from external source. Few APIs are able to render the HTML part, but if we try to have a variable or script in that HTML, that is not working. Tried few things. Following is render method of component
render(){
const varInside = 'Some Variable Inside';
return (<div>
<script>console.log('Hello inside render');</script>
<div dangerouslySetInnerHTML={{__html: this.state.htmlContent}} />
<div>React HTML Parser - { ReactHtmlParser(this.state.htmlContent)}</div>
<div>React to HTML - { htmlToReactParser.parse(this.state.htmlContent)}</div>
<div>Raw content - { this.state.htmlContent }</div>
</div>)
}
htmlContent variable is pulled form external source using call, following is present in this variable.
<h2>This is a HTML fragment {varInside}</h2>
<script>console.log('Hello from fragment');</script>
The varInside is not getting replaced. Tried few options to convert HTML to react markup
API provided by react to set HTML
React HTML parser is using npm module react-html-parser
React to HTML is using npm module react-to-html
We get output something like
Also the script tag console.log is not getting called whether its inside render method or part of html coming from external source. If there a JS function which is part of markup, present in some other JS library, we were checking if that can get executed.
Having said that, why we are trying to do this (as this might not be right approach). We were evaluating a use case where HTML markup is fetched from a different CMS server and used in react components. There would be some pros and cons of trying to integrate reactjs with CMS (CMS work in traditional manner of every page being seperate page, while reactjs is a SPA based framework). But first we are first evaluating different options (exposing JSON instead of markup from CMS might be one option). Any suggestions would be helpful.
I have a shell file called ajaxshell.html. This has an AngularJS app that loads another page called entrypage.html and renders that as HTML using $sce.
In entrypage.html I would like to use Angular for validation purposes - checking that certain fields have been edited, for example. However, entrypage.html simply cannot seem to find Angular(tested by using a simple ng-repeat) no matter which of the 2 pages I include it in.
How can I access Angular from within entrypage.html?
I would have entrypage.html brought in as the template for a directive, rather than a welded-in piece of HTML. If you need the URL to be dynamic, you can assign a function to templateUrl when declaring a directive, and it can put together the URL on-the-fly for you. Angular will then consider the page to be a valid component of itself.
When $compile-ing an angular HTML template string I'm trying to put additional controllers and directives inside a <script> tag and use those in the HTML template.
This way I'm essentially trying to implement some sort of plug-in-mechanism, so that I can load external files that augment my app's functionality.
The <script> tag does actually get evaluated, but my problem is, that the HTML template compilation takes place before the evaluation of the JavaScript. So the compiler complains about missing controllers.
Example:
http://plnkr.co/edit/8oZYhRHAjP84ecnl6hG3?p=preview
This example throws an error: Error: Argument 'Controller' is not a function, got undefined
If you delete lines 15-18 (the HTML that references the created conroller) in app.js, you can see in the console that creating a controller this way does actually work.
I finally managed to do it based on the solution in Loading an AngularJS controller dynamically.
Thx #JoseM, #MaximShoustin and #JussiKosunen for your hints and help.
http://plnkr.co/edit/fzmEZlP6bGBJqTOkfApH?p=preview
I have an Angular app that needs to support customizable reporting. My intention is to allow the user to select one of many reports available and have a back end REST api provide the template and the data as JSON (end user can customize the template).
The app would then insert the template somehow into a "reporting" view page then put the data in the scope and Angular should compile and display the report / template.
I've looked into ng-include however that seems to support only an URL or path to a document, however I have the template text already via the REST service and I cannot use static urls or file paths, this needs to be via REST api, if ng-include accepted the template text directly that might work but it doesn't.
I've tried writing a directive, trying to call a method on the page (getTemplate()) that would load the template already fetched from the scope however my directive doesn't have access to the scope apparently.
What tactic should I use to accomplish this? A directive seems best but I'm obviously doing it wrong and completely lost in the docs and my many attempts trying to accomplish this.
You could compile the dynamic template to an element on the DOM in a controller and then in the controller have something like this:
var el = angular.element('#myselector');
el.html(mydynamichtmlfromresource);
$compile(el.contents())($scope);
I would setup your route with template with single DIV container (you could pull all the static container template in a single JavaScript file using HTMLToJS online tool or grunt task):
<section class="view">
<div id="myselector"></div>
</section>
I've tried writing a directive, trying to call a method on the page
(getTemplate()) that would load the template already fetched from the
scope however my directive doesn't have access to the scope
apparently.
Yes you are right, but there is a way to pass data from scope to directive. lets say you want to pass a var "x" from scope to directive
use this
<directive directiveVar='x'/>
inside directive, you need to use isolated scope
"scope": {
"directiveVar": "="
},
this variable will be available only in controller and postlink function, so your directive template needs to be like this
<ng-bind-html="directiveVar"/>
inside the postlink you may need to use this code snippet
$scope.directiveVar =$sce.trustAsHtml($scope.directiveVar)
References
http://docs.angularjs.org/api/ng.directive:ngBindHtml
http://docs.angularjs.org/api/ng.$compile