I am using the angularJS 1.3, and found that the directive doesn't work on firefox 29. Even the test page on the angular site doesn't show the arrow,
https://docs.angularjs.org/api/ng/directive/ngOpen
Any clue on this? Or I have customize to or order to work on FF?
Thanks
Really, it doesn't work.
But, if you need, you can use something like:
<details id="details" ng-show="open">
<summary>Show/Hide me</summary>
</details>
using ng-show in replacement to ng-open
Related
I just installed angular-perfect-scrollbar.
I used the jQuery perfect-scrollbar Plugin but since angular it was thrown out.
Question:
is there a way to update the angular-perfect-scrollbar like $('#container').perfectScrollbar('update'); in jQuery ?
how can I scroll to bottom of container (on content change) with that angular plugin?
If thats not possible with this angular plugin are there alternatives that includes the features above ?
as I tested, you need to add <include-padding='true'> to html tag then it could scroll to bottom(in fact this will change the scroller length, therefore)
it looks like
<perfect-scrollbar include-padding='true'>
<..your stuff..>
</perfect-scrollbar>
cheers
I want to show content that comes from a directive when the user clicks on a link.
<li>Show popup</li>
Obviously I'm new to angularjs. I know the approach above doesn't make sense really but I was also trying to imagine how this might be done with ng-if but not coming up with anything. Any ideas? Thanks!
Edit 1: The directive that I want to use is:
<ng-pop-up></ng-pop-up>
That's part of ngPopup.
Edit 2: This is now resolved. It turns out that in the case of ngPopup, you put the directive somewhere, then you open the dialog using the open method, so I really didn't take advantage of the solutions given here. Giving Martin credit because his solution solves problem originally stated. Thanks all.
Not exactly sure what you are looking for.
When you say, content from a directive, is this an existing directive, or do you think the content should come from a directive?
In your example where you have show popup, do you mean you would like to have a dialog displayed when you click the link?
Or do you just want something like the following example?
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=app>
<a href="#" ng-click='showMessage = true'>Click Here</a>
<div ng-show="showMessage">Your Message Here</div>
</div>
Try looking at using ng-if (AngularJS docs). You can use a boolean in your scope to that is toggled by the ng-click.
I am using angularjs from 2 months but never comes to problem like this, so thought of sharing with you people and getting some good suggestion on that. Here I am trying to apply ul/nav-group element dynamic values. Everything is working fine means, if I see developer tools on browser it gets value and everything, but not the +/- sign. I search on google its saying that it loads after DOM creation so it is not showing that. But no buddy tells the solution for that.
Consider my code:
<nav:group ng-repeat="parentChild in parentChildList" title="{{parentChild.filterText}}">
<nav:item data-view="/ui/icons/fa" ng-repeat="childs in parentChild.childList" data-icon="fa fa-lg fa-fw fa-plane" title="{{childs.filterText}}" />
</nav:group>
The value for particular fields are straight forward means its simple list.How the directive can solve this problem.
Appreciate any suggestions . Thanks.
Add an ng-cloak directive on the body tag of your app to prevent loading the element until angular has finished loading.
Your body tag would look like this:
<body ng-cloak>
...
</body>
You could also fix this by using promises in your services, that is definitely the best practice regardless, but ng-cloak is a quick and easy fix.
Hope that helps! If ng-cloak doesnt work for you post snippets of your controller and service and I will help you add promises.
Good Luck!
-Justin
I have a custom directive (to exposecertain fields), and inside that I have another directive (the drop down box for the field). It's working well on Chrome, but on IE9 it appears the ng-show and ng-if is failing to evaluate. It appears not to even enter the function I defined (I put console.log inside the isAllowed function and it appears in Chrome but not in IE9).
<div>
<select id="" class="form-control" ng-model="measure" name="{{name}}">
<option ng-if="isAllowed(name, 1)" value="1">Kilowatt Hours</option>
<option ng-if="isAllowed(name, 2)" value="2">mmBTU</option>
<option ng-if="isAllowed(name, 3)" value="3">Therms</option>
<option ng-if="isAllowed(name, 4)" value="4">Decatherms</option>
</select>
</div>
I have tried ng-show instead of ng-if and it behaves the same in IE9. It appears the replace: true I put on my first directive is not honoured in IE9:
Whereas in Chrome this is replaced as expected with surrounding DIV elements and my custom directives cannot be seen anywhere, which is good.
Has anyone had experience of this before? Is it something to do with having a directive inside of a directive? Seems like IE9 does the first one OK then stops.
(I wish I could drop IE9 but it's an internal app and they're still on IE9 everywhere, so I've got to make it work somehow).
PS: The aim here is to only show the options that are relevant to the given field. In this case Electricity can be measured in kWh and mmBTUs but not in Therms and Decatherms. Inside the isAllowed function is supposed to be some switch logic. It works fine in Chrome, just not IE9, so I might need another method as a workaround.
PPS: Angular 1.3.2. IE9 - Browser Mode: IE9, Document Mode: IE9 Standards.
Figured it out. Isolated scope. Somehow Chrome was dealing with it OK, but IE9 was not.
In my app I have the fields I want to show to my user defined in a Partials module, but the drop-down lists is something I want to use in multiple places and they may change, so I defined them in a directive called BusinessRulesDirectives.
All I needed to do was drop in the BusinessRulesDirectives as a dependency to my Partials module and it works across both Chrome and IE9.
angular.module( 'ActualsPartials', [
'BusinessRulesDirectives'
] )
For some reason Chrome was able to run fine with this, but IE9 did not like it:
angular.module( 'ActualsPartials', [] )
Also, no errors were being output. I just happened to double-check for isolated scope as a wild guess.
Would be interested to know why Chrome was OK but IE9 was not.
I am going to create an application with Angularjs. I have several modals (with the ng-dialog libraries) to create, modify data like an user for example.
When I open it, I can always see during several milliseconds names variables with accolades like {{user.name}}, before it renders the real value.
It is not really beautiful and then if someone has an idea about how to manage this type of display problems, please share it.
Thank you in advance.
There are couple of ways to deal with it, you could either use ng-bind or ng-cloak directives
Check angular ngCloak directive documentation
https://docs.angularjs.org/api/ng/directive/ngCloak
You can use ng-bind. Here is the official documentation on it:
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed >by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, >it makes the bindings invisible to the user while the page is loading
Usage:
Hello <span ng-bind="name"></span>!