I have an angular app which will display an image from an array for instance
images[$scope.activeIndex]
On the page is a link that will do a window open popup and on this popup page will be a next button. How does the child page affect the parent page. So the next button will call a function on the parent page which will increase the $scope.activeIndex by 1 and change some other scope values, which changes the image on the parent page
Typically communication between controllers is done via events. See this SO question for more detail.
In general, the child controller fires an event on the button click then the parent controller handles the event.
Related
I am new to angular and have a situation where we have nested views and one of the view has link(s) to open a modal
But the issue is that when the modal opens up one of the views in the background is getting reset..dont know why and how can we resolve it?
[Plnkr][1] :
http://embed.plnkr.co/dliyNd5EaobgkFNA8Xxg/
will really appriciate the help..
so the issue if if we open child1 on the page and then click on open modal it actually clears the child 1 view
You have defined a home.modal1 state, and trying to redirect to it by ui-sref in view2.html. As it didn't have a template to show, so you will see a blank page which looks like the child views are resetted.
I have add a template for home.modal1 state with your plunker to help you confirm that.
You can change the ui-sref to ng-click and define a function in view2.html controller which calls the $modal.open to open the modal.
I have a page (P1) and their is 1 button on P1, now I have to open another page in separate window/tab (C1). Now on C1 I have to perform Datasave on button click using the controller and module of P1.
Is there any way so that we can save data from child window using the resources of parent window?
You can use JQuery Dialog box and pass any parameter you want from controller to Modal directive. As the variable is already available in controller, you dont need to pass the data back. Like below -
data ="data"
where $scope.data is available in directive
This guy has a written a nice article on this - http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
Here is a fiddle too http://jsfiddle.net/theparabolink/dnCHA/
$location object seems to be the modal one, not the parent one.
My modal performs an operation over a listing in the parent window, so when user clicks a button into the modal i want to close the modal (already accomplished) and reload the listing (parent) window.
Calling the controller of the parent window would perform a new listing so would be also nice.
Use case is that we've got a page with lots of Angular. Sometimes we pop up a modal, and as the user interacts with the modal, it sends messages that result in the the main page (which is behind a semi-transparent overlay, but still partially visible) updating.
This is distracting, and I'd like to "lock" the main page while the modal is open.
I could do this by having some property on $rootScope and making the individual Angular controllers aware of that, but I really want to just select the DOM elements on the main page and essentially unhook their scopes from them temporarily, and then re-hook them when the modal closes.
Create a copy of your data using
$scope.modalData = angular.copy($scope.originalObject);
then update this object on the modal. Once you are ready to close the modal, at that step copy the data back to the DOM scope object.
$scope.originalObject = angular.copy($scope.modalData);
How can I access child page controls from the parent page in a Silverlight 3/4 Navigation Application? I wish to hide an image from the child page when I click a button in the parent page.
I think you can do this by returning a reference to the child page to the parent page when the navigation frame's Navigated event completes. The NavigationEventArgs parameter has a "Content" property which is set to the child page which has just been navigated to.