Because I am using ngInclude to switch different templates, each template contains the same form to call the same functions in the controller. I want to include a defined variable, like a table name, to the ngModel, so I can use it to filter the data in either js code or PHP code, in order to insert the information into the right table.
I did some researches but did not find any. Does anyone knows how to do it, or have better idea how to do it?
Thank you
You can use angular ui-router instead ngInclude for loading html template, then you can pass data as variable
take a look at this
https://angular-ui.github.io/ui-router/site/
sorry it is a stupid question and I just solve it, I added a value into the parameter of the submit function, like ng-click="submit(file, 'poster')", then use it to deal with the js code and php code.
Related
I'm using MVC5 and passing model from Controller to View. In the view I have
var test = #Html.Raw(Json.Encode(Model.Data));
It work great, I have my model in the js variable. The problem is when I'm going to see my HTML code, the whole variable is rendered
Is there any way how I can remove or hide this code?
Thanks
To pass a variable from your server to the client you have two options really:
Do what you have done (but the value is rendered in markup)
Expose a webapi and query the endpoint in javascript to get the data
Option 2 is best practice.
Without more details on what you're trying to achieve I can't give a more detailed answer, but basically you should be looking into webapi to resolve this.
note: there are other things you could do like websockets and cookies, but it's unlikely that you want that kind of stuff for this
First of all, sorry to ask a question that has been asked in similar ways before. I just can;t get any of the solutions to work for me.
I am using handlebars.js with the express-handlebars library in node.js. I have both server and client rendering set up correctly and can render partials with data passed in through routers with no problem.
However I am struggling to access the page context and render javascript data declared in a script in the page.
Page snippet:
<script type="application/javascript">var hash = {
var1:'this is the data I want to render',
var2: 'this is some more data i want to render'}</script>
<div id="thisdiv">
{{> blag this.hash}}
</div>
Partial 'blag':
<div class="blag-partial">
{{this.var1}}
{{this.var1}}
</div>
I cannot get the value var1 in my hash variable to render.
If i pass a hard coded string to the partial then it works with no problem, but I can never seem to access what i would call 'page context'.
What am I doing wrong that I can never seem to get this to work?
I have tried...
Passing 'this' as the context into the partial
Using the '../variablename' syntax to pass it into the partial
Send key value pairs into the partial
Accessing variable from context using the # symbol in both the partial call and inside the partial itself
...and many other combinations of these things. With 100% failed attempts except when I pass in a hard-coded string.
Any help would be really appreciated. I feel like this should be simple.
OK, so to resolve this problem I needed to change the JavaScript to actually grad a reference to the div i wanted the output in and inject then call the template with the data I wanted passed as an argument to the template
var hash1 = {
var1:'this is the data I want to render',
var2: 'this is some more data i want to render'};
document.querySelector('#thisdiv').innerHTML = blagTemplate(hash1);
And I changed my partial definition to :
<div class="blag-partial">
{{#with this}}
{{var1}}
{{var2}}
{{/with}}
</div>
My second mistake was that I thought I could inline this script inside a script tag in the page but it doesn't work at all.
I think my biggest mistake was in thinking that the 'express-handlebars' npm module was actually doing more for me than it actualy is doing.
In reality...it automatically compiles my templates and partials in any of the directories I specify and that's about it.
So when I look at tutorials like like https://www.youtube.com/watch?v=4HuAnM6b2d8 for example, I still need to do the same process really...I can just skip the compilation process because thetemplates / partials were already compiled in my express node server.
Now I realize this it's ok, I just misunderstood what I should expect.
If anybody has any knowledge to the contrary, please feel free to share.
I hope this can help at least 1 person, because it frustrated me for hours! :)
I have an Angular application where several departments are returning some bad characters in the data. In particular, one of our division codes is coming back as %L when it really should be %25L. If I use the Javascript escape function in my services it fixes the data as it goes BACK to the database. However, I still have the problem in my views where we use:
{{ Case.DivisionCode }}
We use that value to build a URL and the %L is breaking the code. Is there a way to do something like escape() on that value in the HTML?
You can do in the controller something like following:
$scope.Case.DivisionCode = escape($scope.Case.DivisionCode);
assuming that you have a function in the controller called 'escape'
If I understand your issue correctly, I think you may want to look into ngSanitize and the Strict Contextual Escaping service for this. They provide the functionality of the escape/encodeURI method, but in an angular context.
I am using an angular wizard for my app's registration process.
Angular Wizard -
https://github.com/mgonto/angular-wizard
However, no matter what I try, each step of the wizard is not allowing for form validation (which basically comes out of the box with angular and the use of forms with the FormController and the $error object.
I have posted on the project's issues page regarding form validation, but I have not heard from the owner of the project or from any other users with examples of working code, so I'm hoping some more advanced users here can help.
Oh and to help isolate the problem, I have only included the html for the first step in my jsfiddles.
Validation Issue - https://github.com/mgonto/angular-wizard/issues/41
The validation issue page links to my jsfiddles and other efforts.
Is this a scoping problem???? If so, how do I get around it? Currently when I click the Next button, it just progresses through the wizard, and when I try to send the $error object to the console, all I get is "undefined".
Angular docs (form properties and reference to $error) - https://docs.angularjs.org/api/ng/type/form.FormController
It's definitely a scoping problem. I was able to get things to work by reaching into the scope of a child element (in the controller) and by defining the variables in the view (html) as being part of the $parent element. This means that all of the variables are set in HTML as
ng-model="$parent.variableName";
Changing this variable's value from the controller requires a call as follows:
$scope.$$childTail.variableName = 'something that you want to change the value to';
But reaching into $$childTail is a no-no. This whole project needs to be reworked to fix the scoping problem if you ask me. And there needs to be documentation on how to access validation variables if the revised project uses anything outside of typical angular data binding.
My solution code is attached in gists, below.
Controller Setup
https://gist.github.com/Shawful/a4f8ff5097eabc5306f4
HTML Setup
https://gist.github.com/Shawful/f8dc97d6fd88bbb111f9
I think part of your problem is the lack of dotted notation on your ng-models. In general you want ng-model="container.piece". There are numerous articles on the problem of writing to a child scope if your models do not contain a dot in them. Have a look at Understanding scopes.
I have some table that ng-repeat is building. the table contains a lot of data, and sometimes the build phase of the html is taking 10-20 seconds on weak computers.
So i've started to explore about building the html in the server, but the problem is that i'll loose the data-binding, and i'm needing it because i have inline edit functionality in the table.
The ultimate solution will be rendering the table in the server-side, with all the directives remaining including the ng-repeat, and on the client, makes the ng-repeat recognize that the html already has been rendered for the first time and not render it again, until the first change in the data.
In the Angular source code in the ngRepeatDirective, there is the "lastBlockMap" object that contain mapping betwee each element created by ng-repeat, to his scope, in that structure :
clone: [THE_ELEMET]
id: "005"
scope: ChildScope
and from reading this arcticle :
http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm
i've got to conclusion that if i'll create this object, and pass it somehow to the ng-repaat directive, the directive will know that the html is already been rendered and will not render it again.
The problem is how to pass such information to ng-repeat???
Any one encountered this situation??
P.S.
I'm familiar with all the "ngRepeat preformance" posts and arcticles and have tried a lot of other options before approaching this solution, so please try to help me with this one.
Second P.S.
Sorry for my english... :)
There is no solution for compile the html into loop in angular.
maybe you need to try clean the json data you try to render and make it as simple as you can, and if you include directive inside the table, try to render it after the table is done.
also, try to isolate the reason for the slowness, disable the inline edit and all the other featers inside the table.
Use prerender.io to render the html on the server side. It basically opens a phantomjs process and executes the JS on the server, and serves the output. Works pretty well.