I want to hide a list of users when I to display the nested view users.info .
I wrote this code
HTML
<div ng-hide="hide">
the list of users...
<a ui-sref="users.info"> <button ng-click="hideUsersList()"> </a>
</div>
Controller
$scope.hideList = function hideList()
{$scope.hide=true;};
it works and hide the list when I click on the button, but the problem is when I use the back button in the browser, hide still 'true' and I get a blank page
If you only hide the DOM element, the scope remains and the hide variable is still attached to it with the latest value.
If I understand correctly, what you are looking for is maybe switching the nested views when moving between states, that way each time you move to a new state you'll be instantiating a new controller and a new scope.
Nested States, Nested Views
Related
I have home page that lists items, but also when I add an item I want to popToRoot(), to home page. Now, If I come to root from addItemPage, I want to show the button to save a list, to make a HTTP call..
Is it possible, I was thinking about passing the for example (fromAdd: true) to navCtrl and then based on that show the button(ngIf) ?
You can use any of the rootscope variables, navparams and service to set the value on the parent page and then access it in your ng-init function declared on you child page and show your button on the basis of that value by using ngIf expression.
I have two DIVs - one, that is always visible, and another one, that gets displayed after I click a button (it is toggable):
<div>
<div>
<small>ADDRESS</small>
<p [appQueryHighlight]="query">{{ address}}</p>
</div>
</div>
<div *ngIf="showDetails">
<div>
<small>NAME</small>
<p [appQueryHighlight]="query">{{ name}}</p>
</div>
</div>
My custom directive works well on the first DIV (it changes the color of letters inside the paragraph that match the query entered in an "input"), but does not work on the second DIV.
Here is an example of how "Test address" looks like when query is "addr":
Test addresswhere bold text is for example red-colored text.
But when I have name John, and query is "Joh", it should also be colored once shown with the button, but it is not.
As I understand, I need to re-run the directive after I click and toggle the second div. Also, probably I have to do this with delay, so it has time to be shown. How can I do this?
UPDATE
Problem with my directive is related to *ngFor - both DIV are located withing ngFor. I have to call directive ngOnChanges or ngOnInit only after the new list get propagated based on the query. I have no idea how to do this, and currently, directives get loaded before ngFor fully loads - this cause problems.
Here is my previous answer:
I finally managed to solve this problem, thanks to #iHazCode.
So firstly, this is probably a duplication of problem described here: Angular 4 call directive method from component
Because my directive hightlights the specific letters in paragraph based on input query, each time the query changes, the directive should fire, thus I am using ngOnChanges withing the directive.
This is not working with *ngIf, because when ngOnChanges fires, the second div and paragraph is not visible.
As a workaround, we can access the directive from out component using #ViewChildren:
#ViewChildren(QueryHighlightDirective) dirs;
And then call it's ngOnChanges method, once div is toggled. In my case, the problem was related with last occurence of the directive within the component:
toggleDetails() {
...
this.dirs.last.ngOnChanges();
}
That was exactly what I was looking for, I hope it will help someone.
In my case I also encountered another problem - the defined DIVs are within *ngFor, which is also propagated based on the query, so I have to make sure that the list will get propagated before calling ngOnChanges. I haven't find a solution for this yet.
ngIf does not show/hide elements. ngIf determines if the element exists on the DOM. You can verify this by looking at the source of your rendered page. Change the code to use ngHide/Show instead.
On one of my pages (which has
<button class="button button-small button-balanced" data-ion-modal="reviewPopup">
leave review
</button>
in that Modal I have a form that, when I click a button for, should send data to the server from both the Modal and the template from template a. I can get data from the form in the Modal just fine, but I can't access any data from the calling page (specifically I need the _id). Calling Template.parentData just returns null.
Instead of triggering the modal from the template using data-ion-modal="reviewPopup", you can trigger the Modal from your button event, for example -
Template.templateName.events({
'click #review-popup': function() {
//capture data from parent template first
//....
var parentDataContext = {some data}
IonModal.open("reviewPopup", parentDataContext);
}
})
After the modal opens, the parent data can be accessed using this in the modal helpers.
I believe that Template.parentData (from the modal) will be returning either the body template, or another top level template specific to the meteoric framework. Either way,
If you were using a different framework where you specifically add the modal template to the page somewhere I'd suggest passing in _id as a template parameter.
But with meteoric, as far as I know, you can't do that - so you may have to use something with global scope.
If you are using a router, and have the _id as part of the route, get it from there (e.g. FlowRouter.current().params ).
Or just use the simplest option and use a Session variable. Set it in a onRendered function, access it in the Modal's event functions
I have a component say {{component-1}} which gets called many times and creates a custom-texbox container and label as many times as it gets called.
Now whenever a user writes something in it a suggestion box should appear below it. Since the suggestion box can be reused everywhere i dont want to have a separate suggestion box for each {{component-1}}, rather i want to have another component called {{suggestion-box}} that gets inserted inside component-1 i.e. the textbox container.
I dont want {{suggestion-box}} to be inside dom at all since it is needed only when somebody types in it. I want to add/insert it into {{component-1}} when someone types. Instead of a component i even tried to use a view
Here are the different things i have tried and failed
Note:
suggestionBox is the component
textbox-container is an element inside {{component-1}}
Inside {{component-1}}this.$().find(".textbox-container").append(this.suggestionBox );where this.suggestionBox = suggestionBoxComponent.create(); I have event tried suggestionBoxView.create();It gives me the error that i one view cant be inserted into another and i need to use containerView
var tmp = Ember.Handlebars.compile('<div class=".suggestionBox"></div>');this.$().find('.textbox-container').append(tmp());I get the error called
Uncaught TypeError: Cannot read property 'push' of undefined
I even tried to use view instead of component i.e. make suggestionBox a view but then again i cannot insert one view inside another
I have tried a lot more things.
Few points:
I dont want alternate solutions of how textbox and suggestion box could be created
How to pass information from a component or a a template to a view? Say i do {{view "suggestion-box"}} inside component-1 template, how do i pass values to it? Say for components we pass in the context like this {{component1 sampleVar1=val1 sampleVar2=val2}}
i Want to know how to programmatically add a component or a view and if it is a view how to pass the data to it?
I dont want to use container-view since it will cause more complexities, however if your solution allows me to pass value from {{component-1}} to container-view and inturn pass it to corresponding childView1 and childView2 then that solution is acceptable
Just an update:
I even tried to use a view container inside the {{component-1}}
I also tried to use view block inside {{component-1}} i.e.
{{#view "view-name"}}
----earlier component elements here-----
{{/view}}
In both the above points "view-name" is a ContainerView which is getting inserted properly but the component element are not getting inserted
This can be achieved with a ContainerView and the viewName attribute. The component or view can access the ContainerView or any other view that is part of a template through its assigned viewName.
Example,
hbs
{{view Ember.ContainerView viewName="my-menu-container"}}
js - then from the component or view
this.get("my-menu-container").pushObject(suggestionBoxViewOrComponent);
http://emberjs.jsbin.com/yoyujeqi/1/edit
p.s. the context of the example is not relevant to the suggestion box, sorry about that, as it has been extracted from another answer related to adding a menu view dynamically.
can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.