Utilizing angular-UI-Bootstrap 0.9.0, which has full bootstrap 3.0 support now. Awesome...with bootstrap 3.0, I could do the collapse by pointing to an ID target, but I can't figure out how to do that using the angular-UI code instead. It seems to just say, "find all isCollapsed and dump it no matter what" so now all collapsible/expandable containers operate at the same time not matter which collapse link you use. My code is identical to http://angular-ui.github.io/bootstrap/#/collapse, but with multiple collapse objects and links within the same controller. Ideas?
Shortly after posting this, I found that if you wrap each instance in the controller, each link becomes isolated. Works perfectly.
Edit: Nested controllers however do not seem to operate in the 'Collapse All/Expand All' way that I would like...Still testing.
Related
This has been frustrating me for hours – so time to turn to the good people of SO.
In my angular app I am using ui-scrollpoint to affix a sidenav once it is scrolled to the top of the screen. It is working as intended when using an absolute scrollpoint value (ui-scrollpoint="150") but not when using a relative value (ui-scrollpoint="-100").
The problem at the moment is that the ui-scrollpoint class is applied to the element when the view is loaded (I am using ui-router), even when it shouldn't be.
Even more frustrating is that I haven't been able to recreate the problem in Plunker - here I have mocked the layout of my app - but ui-scrollpoint works as one would expect.
What could be causing this erroneous behaviour? (Documentation is non-existent)
Does the ui-scrollpoint's parents all need to be display: block and
or position: absolute? (Although I've tried this.)
Does it not work in nested states? (The plunker shows that this is
ok.)
Does it not work inside custom and/or transcluded directives. (Again - the plunker shows that this is ok.)
What styling might be on the various parent elements to make this not work?
The only thing I can think is that the class is set permanently somehow when the directive is compiled before rendering / insertion.
When ui-scrollpoint="" or ui-scrollpoint="0", the page renders correctly, but the class gets added as soon as the page is scrolled, even if the element is further down the page.
When ui-scrollpoint="-100", the class is applied from the beginning. It's as if the browser thinks the window has already scrolled past the element.
Help appreciated!
After no luck recreating the issue on Plunker and trying to find the root cause (which wasn't my custom directives and wasn't my layout), I thought to re-download and install the latest scrollpoint.js.
It is now working. Perhaps a bug in an old version. Perhaps I mistakenly edited my local copy.
I'm using Angular Material 1.0.1 library, but I don't want DOM elements' removal to be delayed when using ng-repeat. When the dataset changes, elements stick around for a little bit more and it looks like the page is lagging.
I found out that disabling all animations with $animate.enabled(false) fixes that problem, but still I want some animations, such as for $mdToast to be shown.
How to disable animations only for changes in dataset for ng-repeat?
After doing some research, I think I found my answer.
AngularJS's animations are built to work with CSS transition rules, so I just made the objects disappear with CSS as soon as they were being "animated out".
.repeated .ng-leave {
display: none;
}
This approach works, but still attaches unnecessary animation classes to new objects, which might affect performance. Any suggestions on how to fix this are welcome.
As you already found out, you can use $animate. There is a function that takes the element as argument, so you don't have to disable it globally: $animate.enabled([element], [enabled]);
It should be pretty easy to write a directive which disables the animations on the directive's element.
Alternatively you can probably configure the $animateProvider with $animateProvider.classNameFilter([expression]); to exclude elements with a certain CSS class, the parameter is a RegExp - so something like /^(?:(?!repeated).)*$/ may work (not tested).
If you are after performance then the second approach is probably what you are after. From the docs:
Sets and/or returns the CSS class regular expression that is checked when performing an animation. Upon bootstrap the classNameFilter value is not set at all and will therefore enable $animate to attempt to perform an animation on any element that is triggered. When setting the classNameFilter value, animations will only be performed on elements that successfully match the filter expression. This in turn can boost performance for low-powered devices as well as applications containing a lot of structural operations.
It's possible that I'm not understanding the scopes correctly, but I'm having problems getting some features of my implementation to work. One of which is explained here: https://github.com/nlaplante/angular-google-maps/issues/473
I basically get the model information in the windows directive without ng-non-bindable, which prevents ng-click from working. But my ng-click method needs the information from the model to work properly.
The other issue, which you can also see in the code example at that link, is that I need to essentially show two markers per marker - what I mean is, I need to show a "frame" and then the image for each marker, which are always going to be two separate images. Is there a way to accomplish this?
Added plunkr which demonstrates both problems: http://plnkr.co/edit/QJmHKBSV2XniqF6HX7FS?p=preview
You can see that the links within the window do not work properly (they won't deliver information from the scope because that scope is isolated ?), and the other problem is going to take a more creative approach, which is that I basically need to include two images with each marker.
Try this for your details button:
<button class="btn btn-etk-green" ng-click="$parent.$parent.$parent.deviceDetails(model.id)">Details</button>
Not sure what angular google maps is doing, but after some inspecting it looks like it's dumping all your data into the model property. So you can access it that way.
Here's the edited plunkr: http://plnkr.co/edit/zkYSqcf1735nOOd4QmBI?p=preview
I'm required to populate my bootstrap powered left navigation based on permissions stored in database.
Permission based menu data set will be fed from web api
So i tried to extend http://jsfiddle.net/kmussel/evXFZ/ directives to change my static menu to dynamic menu .
Everything goes well except collapse functionality is not working as expressions for dynamic ids for data-target is not evaluated somehow.
I have created http://jsfiddle.net/jaimini/gKnJ2/1/ ti mimic the issue I'm facing.
data-target="{{node.id}}"
is not evaluated and hence expand/collapse is not working.
I have also added hardcoded IDs in 2nd menu to show that my approach will work if the expression is evaluated as required.
Manage to solve the issue by removing target attribute from parent link.
updated the fiddle and now its working as per my need.
please note that for proper functioning of bootstrap collapse plugin
data-target="{{\'#navigation\'+node.id}}"
would be required.
This jsfiddle is like yours, it use recursive ng-repeat. The googgle discussion about rendering tree like structure is here.
The different between ng-if ng-switch to ng-show ng-hide is, ng-if will not render the html
if the condition not met rather than render those elements that is hidden but taking up
resources. It is not evident for menus because there are not alot of binding/watches use. But
imagine you have render 5 - 6 tabs with lots of form data.
I am using a directive "slideable" which creates a slideout area and has a toggle. This code that was not written by me but it demonstrates a larger issue for me. When I changing views (most commonly /user/:id type), slideable is a directive used on the template. The directive searches for an element during its link function and binds a click event. The issue is that when I am changing routes and the new view ( same type but different id ) is being loaded the directive is re-binding to the old view. If I stop the browser in chrome during the link then I will see two ng-views on the dom and the issue is it binds to the one that is leaving.
I also have other issues that appear to be related to this phenomenon. Is it normal that the old view would still be on the dom while the new view is being formulated?? Why wouldnt the old-view be destroyed before the new one is rendered? How do I get around this issue in a directive like this?
Thanks.
I am looking to understand conceptually what is happening. I already modified the directive to select the latest view and to appropriately search and bind to the correct element. But I am a bit perplexed as to why there would be a state where both co-exist on the dom.
One definitive reason why the old HTML fragment is briefly present along with the new one is to support animation of transitions from the old to the new. Take a look at the ngView documentation and you'll see an example of an animated transition, and it'll be clear that this is not a bug or a design flaw.
Usually when someone has problems with binding to the right element or element's event, it's because they are selecting the element without limiting the scope of the selector to the HTML fragment being added or updated, or trying to target parts of the DOM outside of the directive. So that's the first place to check, that the directive is doing things right, but like I said we'll need code to check on that.