I'm trying to implement a few angular UI components into my simple angularjs application. When elements from the directives are entering the DOM they are shifting elements that are already there rather than popping over them. It seems that any directive that is meant to appear overtop of other elements are being displayed this way.
I'm a relatively new developer and there is a decent chance that I'm missing something easy and completely obvious. Any guidance is welcome.
I'm using angular 1.1.5 and ui-bootstrap 0.6.0 (with templates included).
Below are some screenshots to give you a better idea of what I'm talking about.
Datepicker directive as it appears before opening:
Datepicker after opening:
What it is suppose to look like upon opening(Link to plunker):
This example is from the tooltip directive which shows the same issue ("on the right" is meant to appear to the right of the text):
Last example using typeahead (names are meant to appear in a dropdown list):
As mentioned earlier, any help or guidance is welcome- I would really like to get these working and have run dry for way to troubleshoot. Thanks!
Related
I'm looking to build something pretty much identical to this snippet in react without jquery. This snippet only works with jquery and jquery does not work well with react:
https://bootsnipp.com/snippets/2q81r
The only examples I can find anywhere are option select examples.
When I try the above snippet it doesn't even show the dropdown without jquery.
Seems like something you could just make yourself and not have to rely on further dependencies.
Have whether it's open or not tied to a local component state variable, and have each input controlled and updating a local state value.
THere re a ton of great UI libraries if you wanna search around for something that might fit your needs - Semantic UI, Material UI, etc.
Or you can follow along a great tutorial - this one seems decent:
https://blog.logrocket.com/building-a-custom-dropdown-menu-component-for-react-e94f02ced4a1/
I'm a Polymer novice, but I guess what the answer will be...
Recently I came across with this issue: I got to loop through a collection of elements (using dom-repeat) and display its contents. But every element has a unique display and bindings, making it almost impossible to display each element dynamically. The ideal scenario would be to load a different component for each display type, but it looks like there is no easy way to achieve this.
Some options I have been thinking of were the following:
Using dom-if but it would add crap to my resulting HTML.
Is there a dom-switch? If it were something like that and didn't leave empty template tags (as it would do with dom-if) it would be nice.
It's possible to load a component dynamically? Using something like this: <[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
Any other ideas? I would really appreciate any ideas or solutions or at least a workaround for my issue.
TL;DR; you can't
Polymer (and Web Components in general I guess) are best when used in a declarative way. Out-of-the-box your best solution is dynamically creating elements and adding to DOM or messy use of dom-if.
(potential) OPTION 1
I guess you could fairly easily implement a dom-switch element to work like
<template-switch switch="[[some.value]]">
<template-case case="10">
<element-one></element-one>
</template-case>
<template-case case="20">
<element-two></element-two>
</template>
<template-default>
<element-one></element-one>
</template-default>
</dom-switch>
I wrote this off the top of my head. There are multiple ways to implement such an element. A crucial decision is whether to use <template> internally or not. In this plunk I've implemented such element without templates but simply using content distribution.
OPTION 2
There is also Polymer.Templatizer.
Faced with a similar issue of choosing element to render dynamically I created this Plunk as a proof of concept.
As you see, you extend the <template> element with custom rules, which match against a model. You then bind the matched template's nodes with the model using Polymer.Templatizer.
Thanks to Templatizer, you don't have to pollute your actual element with conditionals and still get full binding functionality.
I'm working on a more feature-complete solution. If you're interested I could move it to a separate repository and publish.
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
I'm using angular-ui-select2 to generate a select box.
By default, results displayed in select2 lists simply display a piece of text, but select2 provides a configuration option, formatResult from which one can return custom markup.
I'd like to use another directive I've written as part of the result markup.
This plnkr demonstrates a minimal use case. How can I get the projectLikesCount directive to be compiled and displayed properly within the dropdown?
I was trying to do the exact same but couldn't find a solution. It seems that the population of the results by formatResult is not in the angular lifecycle, therefore whatever markup returned by the function is displayed as is i.e., no directives will be "translated" into behaviour.
An example of this is that if you add the following markup:
<div ng-show='isNewElement'>Add new</div>
it will be rendered every time with no regard to the isNewElement value.
Considering the time this question has been unanswered I guess that it's either really easy or really complicated to achieve the desired behaviour. I'll post if I find a somewhat useful solution.
We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.
The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.
Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.
Is there something that can accomplish this? Or do you have any tips?
I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.
<div class="check-thing">
<button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
<modal ng-show="showModal" model="modal-model"></modal>
</div>
Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.
Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.
Have you looked at the AngularUI Bootstrap modals? (http://angular-ui.github.io/bootstrap/#/modal) They fit very well into AngularJS and can really be styled into almost any appearance you want. Passing data in and getting data out is very easy. Most UX people don't seem to understand how the web works (mine doesn't seem to anyway) and these have been a real savior for me and my team.
I know this is an older post but since an answer was never selected I would like to point out a possible solution that I had come across recently.
The Angular UI BS Popover allows you to have it align with the element you are targeting, which can be click, hoover, and focus.
For content you have the choice between text, HTML formatted string and template. Based on the question, the template is likely the one that would be used to allow the content to be dynamic and include interaction.
You can find more information and a demo on how it works at: https://angular-ui.github.io/bootstrap/