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.
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 am using custom Directive's approach in AngularJS for making dashboard with widgets and for widgets m using angular-gridster
(https://github.com/ManifestWebDesign/angular-gridster).
Requirements:
On right side menu created by custom directive is present.and for routing purpose UI Router in used.
1-I need to open a dashboard firstly empty.
2-when click to Menu1 one widget is opened with data from state menu1 and same for Menu2
3-when 2nd option is clicked another widget added to dashboard without affecting previously opened one and so on.
4-all the widgets have independent data.and navigation in each widget is according to the respective menu.
WorkFlow:
1-empty dashboard is opened via custom directive.
2-widgets are added by providing click event to menu1 and menu2.which will broadcast event.and against that click event a widget is added to widgets array holding information about that widget.
Problem:
problem is routing basically.till now there is no routing involved.info is passed by broadcasting a click event.and by this i have achieved this coloured area.
but the further navigation creates problem.when a state changes by clicking Menu1 or Menu2 it affects both the widgets and and ui-view portion in both widgets show same data.if Menu1 is clicked both widgets show data from Menu1 and vice versa.
Now.i have tried enough solutions but here i want an idea from ui router experts or custom directives' experts.cz i hv tried many possible ways and stuck here for almost a week.
Thanx very very much if anyone can help.
I had an app that I got 80% through building a few weeks back and it uses a lot of jQuery to do animations. I stopped working on that and started rebuilding it from scratch using AngularJS.
I'm now at the point where I'd like to try to add some of the animations that I WAS using in the old app. When leaving from the "main page" to the "details page", I used to have one div go flying offscreen to the left, while the main table seemed to shrink upwards and sort of "merge with" a drop-down box that was coming into view for that new details page. (The table and the drop-down have essentially the same information, which is why the animation made sense. The drop-down allows them to jump from record to record, without having to go back to the main table to navigate.)
Anyways, the way I built this app in Angular is that it is working off of one index file with a single "ng-view" div in it. And then the router determines what template-page to pull in.
I see from the various tutorials out there on animating with AngularJS 1.2 that the "ng-view" fires off events that can be harnessed for animation. But that's ONLY if you're going to add your .css class to be animated to the div that holds the "ng-view".
<div class='whatever' ng-view>
and then your css would contain something like:
.whatever.ng-enter{
opacity: 0;
}
But what can I do if I want to animate the way various PIECES of a view template enter or leave the view? (Most are just divs that act as containers for small tables of data [ as divs, not tables].) I'm using "ng-repeat" in those templates to populate the tables, but I really don't want to animate any of the rows. That's about the only other directive that fires Angular's animation that I'm currently using in the templates.
You can set animations to different parts of your template in it's controller using Jquery itself.
myApp.controller('sampleController', function($scope, $timeout, $location){
$("#submit_button").click(function(){
$("#yourdiv").fadeOut();
$timeout(function() { $location.path('/newurl'); }, 3000);
});
});
Display all your animations then change the route. I have used $timeout so as to set a delay for displaying the animations.
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 have a popup in my application that is hidden when page is loaded and it appears only on click on a specific button.
I have the following code inside my popup DOM
<a ng-click="settings();">welcome</a>
The same code works when i have it in my DOM that is visible when the page loads. But inside the popup, it does not work. It never goes inside the settings() function. Can anyone help me with this?
You should probably create a directive for it. See the documentation and this example. Notice that a scope is applied to the return value of the compilation, effectively var compiled=$compile(element.contents()); compiled($scope);.
Note that there is already a built-in include directive in Angular which might do what you want. The example there responds to changes in a drop down, though you could easily adjust it to respond to a click event.