I want to show a view depending of certain model, I'm using ng-if to achieve it, but I cant get it.
I have the following
div.detail(ui-view="detail" ng-if="consultation.detail")
div.geolocation(ui-view="geolocation" ng-if="!consultation.detail")
So, inside my controller I initially have vm.detail = true, hence the first div it is showing, but when I want to change the value of vm.detail to false (with ng-click event with a link), the first div is hidden, and the second one, is hidden too, and it no should be that! it shoud be showing the second div
What Am I doing wrong?
Related
I'm building a questionnaire out of directives which show the correct input based on certain expectations. Those expectations (including any formerly given input from the user) comes from a parent $scope. Everything is set up in the link function of AngularJS's directive definition object
Where things go wrong is when using md-checkbox: the ng-model of the checkbox inside the directive is set to true, the md-checkbox is still false. I can confirm that by adding a simple input type="checkbox" with the same ng-model property, the simple checkbox is checked, whereas the md-checkbox isn't.
Whenever I click on the md-checkbox twice, it does get checked. So I gather that there is something wrong with the binding. I built a CodePen which demonstrates it. The code inside the pen is almost taken verbatim from my source code
Stuff that I already tried:
Using $scope.$apply() after handling all (DOM) logic in the link function
Idem but with $scope.$digest()
Setting a $timeout with no delay (as way of a 'safe' $apply())
Even going so far as to store the current answer (true or false) in a variable, setting the ng-model property to undefined, and then setting it back to the stored value, all inside a $timeout
I'm at loss here, it looks like something simple given the fact that all the other inputs have their correct data in it.
Replace class with ng-class because ng-class lets you to dynamically bind the class to the element
Depending on your codepen the problem is class="md-checkbox-{{expression}}". I forked your codepen. You can use ng-class. I think this is a bug.
lately I have a pretty significant problem with ng-view and ng-if.Suppose there is a dropdown with two elements (element one and element two).The two elements change a property on rootScope.
I have two more items at another location (div-container, container one and two containers). These are displayed by ng-show - container one at element one and container at element two.
As soon as I click the one element one time and the property of the rootScope changes and then I reload the page, the two containers are alternately displayed without that I do something.
I have several watchers, seveleral ng-cloaks and use the routing using ng-view. I would also like to mention that the application is relatively large. Most often, the problem occurs on Android, presumably on iOS.
As soon as I click the one element one time and the property of the
rootScope changes and then I reload the page, the two containers are
alternately displayed without that I do something.
Did you mean the other two containers just show up for a second and then disappear? If that is the case then I think the condition you are providing inside ng-show is true at the loading time so they appear for a while before the condition changes and then they disappear.
You have to make sure the condition for ng-show is initially false.
I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM
Are there any examples on choosing ng-if over ng-show/ng-hide or vice-versa?
You've already summed it up in your question. If you want to show and hide the DOM depending on a condition, use ng-show. This works well for DOM transitions between workflows, tabs, sections, etc.
<div ng-show="vm.tab == 'products'"></div>
If you only want to conditionally render the DOM if a condition occurs, use ng-if. This is particularly useful for permissions where you aren't interested in exposing any more DOM than necessary.
<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />
If there is some information what you dont want to show to user any how.
You want that user cant see it anyhow even after editing DOM from inspect element then use ng-if otherwise use ng-show.
ng-show renders the dom but if condition is false then element display will be invisible.
`ng-if` renders the `dom` only if condition is true
There are situations when you are force to use ng-show
ex: Consider you are using any jquery plugin which runs on dom ready on any element. If element is getting rendered later when ng-if gets true then jquery will not work. In this case you will be need to use ng-show
I have created a plunkr. Where I need to get the custom directive repeating . However what I need is when i click the check button then all the inputs should be populated inside the slides array in presentation-controller and then I can work with that array.
The problem is the directive is actually adding inputs. When I click the check button, all the inputs should be populated inside the presentation-controller's $scope.slides[] array.
Repeating directive attaching to controller array property
I think your problem is on the view template slide-input.html, here you write ng-bind="slides[0]" and in presentation-controller you write $scope.slides= ["hello"] , when you click plus icon, adding a new directive ,slides[0] always displayed you 'hello'
Question: Is there a bug in angular-strap? Or do I misunderstand how Angular works, and this is expected?
I've created a plunker to demonstrate the behavior.
What I want:
I want to show a different tooltip for each item in an ng-repeat.
Behavior I'm seeing:
Under certain conditions, the tooltip content is not properly inserted into the content template. Thus you only see the template, and not the content template or content itself.
Conditions:
When the page is first loaded, the tooltips work as expected.
When an item is added to the ng-repeat, its tooltip does not populate the template's content section.
If the page starts off with zero items in the ng-repeat, the tooltip in the first item added will work as expected. Items added after that will exhibit the problem.
Regardless of how many items the ng-repeat starts with, any removal of any item from it will make all items added in the future not have working tooltips.
Thoughts: If I boil it down, the "first load" works fine. After that, it doesn't. I'd guess that what happens is that there's a compilation step happening after the first round of adding items into ng-repeat. At that point, the angular-strap tooltip code sees the directive attributes, and sets up those tooltips and the content template. Subsequent changes to the ng-repeat are missed by angular-strap (even though I can see in the console that the call from bs-popover=tooltip(item) does actually run each time the ng-repeat list is updated). But I'm still stumped and wondering if this is behavior I can get around.
How do I allow dynamic tooltips in items added to an ng-repeat?
This seems to work in _popover.html
<div class="popover-content">{{content}}</div>
That is using {{ }} instead of ng-bind...works very odd.
Upon further investigation... Its probably happening somewhere around here:
https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js#L83
Though I don't know where/how/what yet.
Update
So the bug (in Angular-Strap) is with caching your template. Initial retrieval (via http) works fine. But it caches them as an array, and upon retrieval from cache (subsequent additions) it gets an array. Which doesn't have a .data property so your template is empty, and your ng-bind is removed..