I got the following problem in angular and don't really know how to get around it
When you click on the modal links a modal windows should open, each modal window should have it's own controller
When clicking on the sidebar I want a the respective sidbar controller to load as well as the linked template url.
I have tried different setups but using normal ng-view all content keeps loading in the sidebar content area.
Any ideas on how to use multiple controllers and views in this manner?
i don't 100% understand your question, but try using ng-include instead of the ng-view. You can use ng-view for the whole page and you can load dynamic partials through controllers. https://docs.angularjs.org/api/ng/directive/ngInclude
Related
I am working angularjs with MVC , where I need two different ng-view based upon condition.
Currently I have put ng-view on Account folder view for all pages before login.
But Now I have to show different view (not template) after login where i have menu and other html .
How can i have multiple ng-view directive for different base page before and after login page
I don't think you can have multiple ng-view. If you can change your router, try ui-router. They have something called multiple named views
I have a basic angular page, it pulls some records from a database and displays in a table via ng-repeat - this is working fine as a standalone page.
I'm using bootstrap remote tabs https://github.com/thecodeassassin/bootstrap-remote-data and am calling the above page as one of the tabs' content. The angular page is loaded but angular is not initialising though for some reason. Nothing is binding.
I've tried putting the angular scripts both inside / outside of the tab, and also putting ngApp inside of the tab (remote page) and outside of the tab (parent page) and it doesn't make any difference. Is there something I'm missing?
I am not sure what you are trying to do, but I think the problem is that the angular finishes the loop for initializing the content before the pages are loaded inside the tabs.
have you tried to use ng-include to load the content of the tabs dynamically.
also you may need to call for angular apply to re initiate the binding.
another note, if you are trying to use the tabs to load the data asynchronously, you can use regular tabs and let angular handles the loading of the data using ng-include.
What's the best way to have my views appear in a popup modal?
I have the main dashboard of my app, and then whenever the user wants to add or edit an item on the dashboard I want this to be done via a form in a popup modal.
I know I can use jquery to handle the showing and hiding of the popup. But is there an angular way to do this, or is jquery acceptable in this scenario?
Check this out and go down to the modal section. This looks nice and clean. There is an example of the html and javascript there for you. Your view is a template and can be a html file or inline html inside the javascript.
http://angular-ui.github.io/bootstrap/
Much like everything in Angular, there are a number of ways you could do this. Perhaps the most simple way would be to have the HTML of the modal be hidden by either ng-show or ng-hidein conjunction with ng-mouseover.
I'm actually doing this right now and decided to use jquery ui for the modal. Dragging and resizing is hard to do and my modal requires that. I wrap the modal call in a directive so modal pops up onclick. The mistake I made was using jquery append to add new html. Don't do this. Use template or templateUrl and then put that in your modal. This will ensure all scope vars in your modal will communicate with your controllers.
I read about angularJS routing. I want to implement it in my web app, but unfortunately I have a rather difficult situation changing to routing now I think. This is how my app works now (and I know it's probably not the way it should, but it does work):
I have one controller for the whole app.
The view is built with some divs, one of which is a menu div. The others are 'partial' views as angularjs calls them I guess. But the problem I see here is that two of my partial views can be shown at the same time (page is built like this, partial view only takes a portion of the page for itself).
So what I am doing is: I click the button on the menu -> one partial view shows up (ng-show), then I can click something on this partial view to get the second partial view opened on the same page (menu and first partial must stay the way they are).
At the moment I include partials within some divs with php include (which is I am sure the wrong way) and the divs have ng-show on them so that nothing is shown on the beginning. Then I manipulate all the clicks in the menu with setting ng-show parameters of all my partials (views). So if one button is clicked I hide all the others (with ng-click and a function inside controller). But this is tedious work and not the angularJS way and that is why I am asking this question here.
Example of my included partial (stripped of all unnecessary css classes etc):
<div ng-show="showNames">
<?php include_once("views/AREA1/names.php") ?>
</div>
And names.php has for instance just some few elements with ng-repeat and other angularJS directives… I have many includes like that and they work with just ng-show manipulation very well. But now that I grasped some of the AngularJS concepts I see that I made a mistake…
To sum up: how can I use angularJS routes (with ng-view perhaps?-not necessary) to show views within my web app? (taking into account the situation that I have described above). I just want user to be able to know on what "part of page" he is at any given moment.
EDIT: I went trough this and I reckon I could work it out: I need a structure similar to the one in this example 2.1 Online Demo, but furthermore I need to be able to click something on ng-view which should open another view (first one should stay in place). Any idea how to accomplish this?
By using routing feature in AngularJS, the html content of ng-view will be totally replaced by the new partial. You should not use ng-view for such a purpose like showing multiple partials at the same time.
But you can think about mix the ng-view and ng-include.
Let's say, we click each item on the menu, ng-view changes the sub-partial, you can have ng-include in your sub-partials which we can all it here like sub-sub-partial.
Try reading ng-include
AngularJS has ng-view which would contain the main theme of current context, rest of the UI elements are all managed by ng-include. Routes also work in sync with nv-view.
If your view requirement are complex look at ui-router component that supports various combinations.
I have an index.html with an ng-view within the page at a specific region. I want to make it such that when I click on a button on the page, the ng-view switches to another view, but without having to define a new route or trigger a route change. The following options are what I am thinking:
A main controller around everything. Each region/view would have its own controller (subcontroller1 and subcontroller2). Main controller has the responsiblity of switching views when appropriate without route.
Is this the right train of thinking? Are there any examples of switching just a part of the page?
For the first part of your question : no, you can't partially use ng-view. There is only one ng-view per angularjs app, and the ng-view switches to another view according to the router.
You can load specific part of a page by using ng-switch, so that only part of the DOM are loaded according to the value of the ng-switch : http://docs.angularjs.org/api/ng.directive:ngSwitch
Probably the closest answer to your question is to have look at the ui-router, in order to use nested routing : https://github.com/angular-ui/ui-router