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.
Related
I have a link which on clicking opens a modal. Am using angular ui modal. Inside modal I have a row with two inputs and an Add button. On clicking Add button, a new row is added with the text I entered in inputs. I have a done button which closes the modal. On opening the modal again, my newly added row is missing.
Everytime you create a new Modal, you'll be running the code behind it again, effectively erasing any changes you make to it, even if you are using the same controller as the page you create the modal from.
To do what you want to do, you'll have to;
var modal= $uibModal.open({
templateUrl: ''
}
});
modal.result.then(function(array){
$scope.rowArray = array
}
Your modal close function will then be;
$uibModalInstance.close($scope.rowArray);
This example will work if you're using the same controller for the modal and main HTML page, otherwise you'll need to have a resolve for your $uibModal.open to pass it through to the modal controller, but also add your rowArray to the dependencies of that controller.
Hope it helps!
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.
I have a list page, when click a row, will popup a modal view page to show its content, then in it click edit button, I want the popup view page can direct to edit page, that is from one modal view page redirect to another modal edit page, I use angularjs modal to show view page, so how can I change modal content to edit page?
You may fetch your template using $templateCache.get() or making http request.
Then compile it using $compile(template). After template compiling you can put your template anywhere you want in the DOM by using jQuery/jqLite — all angular bindings will work.
thanks to Girafa, I use a simple way(although code is some verbose). I create two Controller and when open view modal, pass $scope in the Options, then when click edit button, first call cancel current modal, then open edit view. like this:
$modalInstance.close('cancel');
$scope.openedit(id);
I'm using angular-ui bootstrap to show modal windows. I'd like to turn this into a directive that would let me pull content from the server and display it in a modal or popover…
For example: <a a-infobox="modal" href="#/content/one">A link</a> should get the content from the href and pull it into a modal window.
I pulled together a plunkr: http://plnkr.co/edit/cwtTHjMsW0knlsq2NNtg?p=preview. The first link has the a-infobox attribute. When I click on it no dialog shows up. In the console you can see that it was called.
When I click on the second link which is called from a controller, it opens the second dialog. Then when I click the button on that modal, it disappears and the dialog from the first click is right behind it.
I'm just starting to dig into directives and am sure I'm missing something fundamental.
Thanks in advance.
I found a solution...it appears that the modal needs to be applied so angular will process it on the next digest.
A simple line: scope.$apply($rootScope.dlg); is all it took.
The plunker was updated accordingly.
I'm building a fairly simple demo in angular and the app has what equates to a main screen and a menu, similar to a landscape mode tablet app where there is a menu on the left of the screen which is always visible, and the main content on the right.
Both the menu and the main content page have their own controllers.
I'm trying to make it so that I can expand the menu out, and collapse it back to 20% width again, while keeping the main page in view.
My problem is that it seems like overkill to create a controller which holds the menu and main page as items, and then to try to nest the menu and main_page controllers within that top level controller.
As far as I've got right now is
<body ng-controller="ViewCtrl">
<div id="menu" ng-controller="MenuCtrl" >
<div ng-click="toggleMenu($event)" > open menu </div>
// all my ng-repeats for menu page content
</div>
<div id="main" ng-controller="MainCtrl">
//all my ng-repeats for the main page content
</div>
<body>
in my ViewCtrl, I have
function ViewCtrl($scope) {
$scope.toggleMenu = function($event){
alert('clicked')
}
}
The problem is that I think I need a way to check if the menu is open, and if so, close it, or else, open it. I've got to set classes on both the MenuCtrl and the MainCtrl for when the menu is opened and closed, and I'd like to be able to close the menu from a click within the MainCtrl.
What is the best way to handle this with angular.
Is there a way to set a class on a parent, if so, I would could do that? Or get any div within the current controller, even if the div isn't created by an angular model? Or do I somehow associate existing divs to the controller?
Most of these sorts of solutions seem quite messy.
The problem is that I think I need a way to check if the menu is open, and if so, close it, or else, open it. I've got to set classes on both the MenuCtrl and the MainCtrl for when the menu is opened and closed, and I'd like to be able to close the menu from a click within the MainCtrl.
There are two ways you can accomplish this.
You can trigger custom angular events in the MainCtrl and listen for them in the MenuCtrl.
You can set a flag(model) on the parent scope (which happens to be ViewCtrl).
Note: You shouldn't modify classes of a DOM element from a controller. Directives should be used for this.