I have a use case to toggle the view of a form using a button. The button is not nested in the same structure of the form, and is out side the scope of the forms controller.
What is the best way to have this toggle button comunicate to the contents controller to display this content?
I have had a similar problem and for advanced comunications between controllers i would recomend a service. A service can be injected into multiple controllers so they can share information & state.
However if all your after is something like a button that you can place anywhere that will show the form, you could consider using the $location.path?
eg. on a view with a list of users
www.example.com/users
append edit
www.example.com/users/edit
then have the form controller watch the $location.path and open itself when it see's edit ?
Related
In my site I have a case where I show a simple order which I can add/remove items to and pay to close the order.In other case , I just want to show the order without the option to modify it.
What is the best way to do this regarding to reuse the view ?
Should I create a directive which I can configure to not show update actions
or should I create 2 templates (one for each scenario) which bound to the
same controller but each template use only the methods it needs from the controller?
Thx!
You may conditionally close GUI items when your order view is in readonly mode, for example:
<button ng-if="!readonly">Add new item</button>
Of course your controller should have
$scope.readonly=true;
when you are going to display the view without ability to modify it.
I am adding some number of textbox controls on a button click and entering some text on each textbox, then am navigating to another one page, and coming back to my initial page. am not able to see my textboxes...
Is there any way to keep my textboxes and values of each textbox in angularjs?
Create a service or factory to communicate between different controllers or in your case page.
Please refer this. Hope it gives you some idea.
Thanks
I am trying to get two multiselect widgets to stay in sync, but am only able to get the behaviour going in one direction.
One widget is on the main page, and the other one is in an angular ui-bootstrap modal. Both multiselect widgets are created using a custom directive. Each instance of the directive is bound to a different controller (MainCtrl and ModalCtrl). The "selected" attribute of each instance of the directive is bound to a scoped variable in their respective controller, which is in turn bound to the same getter method in the Model (getSelectedFilters).
If I change the selection on the widget on the main page, the change is reflected in the widget in the modal panel. However, if I change the selection in the modal panel, the change isn't reflected in the widget on the main page even if the Model has been properly updated (the button "Show currently selected" will show the correct selection even though the widget doesn't). I don't understand the difference at all.
Here is a stripped down plnkr illustrating my problem.
http://plnkr.co/edit/nC5bkGFE4LkYZsaxdjL7?p=preview
I am entirely new to Angular, and would appreciate any input as to why my directive on the main page isn't being updated properly when the data in the model changes.
Version 7 of the plnkr was what I had initially posted.
Basically, calling $apply on $scope.selected whenever the value was changed was not enough to notify the other directive of the change. I also had to setup a $watch:
$scope.$watch('selected', function(newVal, oldVal) {
select2.val(newVal).select2(options);
});
I am now completely unclear as to why the select2 directive in the modal was updating at all without a $watch when I was modifying the select2 directive on the main page. I would love if someone could explain what was going on there! To anyone who might know, go back to version 7 to see what I mean.
Is it possible to modify $scope variables on button click if the button is outside the controller area?
For example:
<input type="button>
<div ng-controller="MeetingsCtrl">
Using classes or IDs to find elements is not how things are typically done in Angular.
A controller is typically defined on the top-level element of each view. If your button belongs to the view managed by MeetingsCtrl, it should be inside the div.
However, maybe your button is actually part of another view, in which case you need two views to interact with each other. This is normally done via services, with each controller injecting the same service. Or you could use events.
Yes it is possible. What you have to do is, create different class/id for both input and div tags.
Then make your div as absolute and input as relative. Problem solved!
I have several Angular UI Modals. Every modal has a Cancel button and an "Action" button (which can be Create, Delete, etc).
I use the ui-keyup directive from Angular UI to identify when user pressed buttons.
I would like to click the "Action" button when user hits Enter.
How could I achieve that?
Here is where I got to so far: http://plnkr.co/edit/n6dgiE?p=preview
http://plnkr.co/edit/icKazZ?p=preview
So, I just made sure that createIt() was available on the ui-event (by moving the controller up to <body>) and just triggered it directly.
Now lets say this isn't feasible (there are too many layers between the body tag and the createIt() function). What you COULD do is put some sort of global-handler function or service on $rootScope and then pass the triggering through. However communication down scopes, or across controllers is outside the explicit scope of this question :-)