I'm starting with fineuploader and I'm currently have an issue while integrating this awesome library in my angular application.
I have some angular expressions in my template:
<div id="simple-previews-template" style="display: none">
...
<div class="qq-upload-button-selector qq-upload-button small postfix">
{{ 'ACTION.BROWSE' | translate }}
</div>
...
{{ Upload.warn }}
</div>
But these expressions aren't replaced at all: my browser displays {{ 'ACTION.BROWSE' | translate }} and {{ Upload.warn }} instead of their values.
I firstly thought it was due to <script type="text/template" id="..."></script> tag, so I changed to <div id="..." style="display: none"></div> without effect.
How can I have angular binding working with fineuploader?
I'm also interested in knowing why it doesn't work ;)
Without seeing more of your code, it's hard to say exactly how to solve your issue. Most likely, you'll need to $compile the template against the proper $scope after it has been added to the DOM by Fine Uploader.
Also, I'm not exactly sure why you are including the template in a hidden <div>. It really should be a <script> with a type="text/template". See our Angular example at https://github.com/FineUploader/integration-examples/tree/master/src/angularjs-nodejs.
Related
#Asking
Help me for my problem, when i built a website with Laravel
i am render my post with syntax like this :
<div>
<p>{!! $post->content !!}</p>
</div>
but i have problem, when i insert a i frame inside post, because the html has been removed with {!! !!}.
i have to try use {{ $post->content }}, but all content rendered with HTML
Any solution to this problem? ?
Thanks very much
With {!! you paste content "as is", in other words you become vulnerable to all types of issues like allowing <script> tags to be placed into your templates.
The {{ syntax will escape any HTML thus what you see is the actual html characters without actually parsing it (i.e. doing {{ '<b>bold</b>' }} will not result in a bold font but in the text <b>bold</b>).
Now with your problem: there are some cumbersome ways to filter out any html tags yourself and leave the <iframe>'s in there (something like {!! only_iframe($content) !!}), but it is quite difficult and will likely not result in a safe solution.
Your own answer which stated that you used {!!html_entity_decode($post->content)!!} simply means that your HTML was encoded to start with, which is not something I can deduct from your question. Note that you are now vulnerable to malicious code injection if you are not certain you can control the contents of $post->content.
I have a PHP blade file and I have a list of components working as they but can't seem to pass in a custom event in the kebab style casing the documentation mentions .
Blade template
<div id="app">
<Shop
:active-tab="activeTab"
#show-product-modal="handleShowProductModal"
>
</Shop>
</div>
Even the #show-product-modal color syntax in my text editor shows something is off but I can't tell what the issue is here. I've even tried camel casing it but that doesn't do it either. However, if i changed it to 1 word , like "#showitnow", it works fine.
When using VueJS you can't use kebab case for listening to component events. Instead your blade template should read:
<div id="app">
<Shop
:active-tab="activeTab"
#showProductModal="handleShowProductModal"
>
</Shop>
</div>
Say I have this simple scaffold in my app_component.html:
<header>
<div>
<!-- here I have some elements that won't change -->
</div>
<div>
<!-- SECTION HEADER: but I want to change this part's content, based on
navigation or something else (auth roles, for example) -->
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<section class="section">
<router-outlet>
<!-- SECTION MAIN: main content goes here -->
</router-outlet>
</section>
</div>
</div>
</div>
</main>
<div class="divider"></div>
<footer>
<div>
some footer here. nothing important
</div>
</footer>
As you can see in the snippet, I'm using a <router-outlet> in SECTION MAIN to show contents which is fine. The problem is, how can I have a changeable part in header section (the SECTION HEADER in the code) and how can I change it's content based on e.g. navigation, auth roles, etc. ? Does AngularDart support this kind of routing? Thanks in advance.
The short answer is no, the router doesn't currently have support for doing this easily.
Other frameworks support this functionality through "named" router outlets. This allows multiple outlets to exist in the same view, provided they're given unique names. Each route configuration then must designate which component is rendered in which named outlet. If this sounds desirable, please feel free to file a feature request: https://github.com/dart-lang/angular
Of course you could always write your own solution. You could create a component for the header section that dynamically loads a different component, depending on which route is active. It simply needs to inject Router and listen to Router.stream for route changes.
Considering this example markup (from http://www.ng-newsletter.com/posts/validations.html):
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="inputNameAttributeValue"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
Is there a way to accomplish the same thing, but use JavaScript instead of custom Angular attributes?
For example, is there a way I can use JavaScript instead of these Angular html attributes: ng-model, ng-minlength, ng-maxlenth, ng-show?
EDIT:
Just to clarify, I'm looking for a solution that uses the Angular JavaScript API. I would like to have a separate JavaScript document (linked from my HTML document) that uses the Angular JavaScript API. For example, is there a way to specify ng-model for a particular form field using the Angular API instead of the custom Angular HTML attribute?
As I understand it, you want to add a directive (for example ng-model) from javascript, similar to how you would do it with jQuery. Short answer: Don't do it.
Longer Answer: It's probably technically possible, but it would violate the basic principles of AngularJS. Your controller should not touch the HTML at all, in fact any code which should directly manipulate the HTML should be placed in a directive. And that directive should be placed on the input directly in your HTML, which is exactly what you wanted to avoid.
If placing directives in your HTML is not practical for your project, then perhaps you should reconsider using AngularJS.
There's a rather long (and well written) answer here on Stackoverflow which explains "how to think in AngularJS", you might find that it's of interest: https://stackoverflow.com/a/15012542/179024
It would also be interesting to know why you want to do this? There is often an "Angular way" of doing things, but it can be different from what we are used to doing.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.