I have created a website using angularJS and a menu with ng-routing. Now I need to open up a modal which has navigation paths to load different content on the same modal. How can I accomplish this thing? can I use ng-view?
you could use a combination of ng-if and ng-include something like
<div ng-if="mode == 'grid'" ng-include="gridUrl">
I have added ng-include to the current view and then through the controller I have changed the necessary views according to the need.
Related
I have used recently the ng-view in partial view and it looks much like the use of ng-include. Is there a difference between the two: ng-view directive and ng-include or when is it better to use which?
Basicly ng-View creates a new View which works with States or Routing, saying this view gets his own Controller and Stuff like it would be a html file. And ng-include is if you have like a html template which u need to show on different views and include it to not duplicate code.
So for example you can ng-include your header html where you have your navigation, and you could ng-view a register form or smth where you need it to have its own Route/ State and Controller
I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window.
I have tried two options:
Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window.
Create a custom module based on "template/alert/alert.html" one. Found myself lost in a number of controllers in order to make popup window working.
What is the best approach to achieve that?
If I understood the question, you want to add a button to the alert that will launch a modal.
Plunker Demo
The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal demos. Then I copied the alert template and added it to a script tag on the page. Inside the standard alert template I added a button as follows:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
That's an incredibly basic approach, but it should be a good starting point for you. If I were doing this in production, I would add my custom templates to the template cache instead of using script tags on the page itself and I would create a custom directive for my modal button so that I could pass any relevant information from my alert to my modal instance and do away with having to hard code the ng-controller on the button itself.
Just put your alert directive inside the modal template:
http://plnkr.co/edit/XJtZWQOqFVc6svECcat0?p=preview
I have an AngularJs template that I would like to re-use with my Kendo Multiselect Item Template and Tag Template.
Is there any way to do this? I'm not sure how to pass data. When I just try to use AngularJS templates, it doesn't work.
Kendo UI templates are just a javascript functions which accepts single parameter - objects to render and return rendered html.
AngularJS template is an HTML fragment which is rendered by $compile service and stored by $templateCache.
It is theretically possible but hard way.
Folks,
I am trying to implement a vertical navbar in my page. This page will be rendered by Angular.
Somehow I am not able to get this to working. not sure what I am missing here.
Clicking on different tabs does not display their respective pages.
Any clues anyone can provide will be greatly appreciated.
here is a plnkr I have created for troubleshooting:
http://plnkr.co/edit/dzfv8VMWCJk8cywgy5mm
You need to dynamically set the classes of elements under nav-tabs and tab-content. The easiest way to accomplish this is to use ng-class attribute that calls a function in your controller to return appropriate class for each tab. To set the active tab, use ng-click on the nav-tabs.
Here is a working version in Plunker:
http://plnkr.co/edit/UBBq7V8mdyqllBHdwegY
I am currently working on an AngularJS project with Twitter Bootstrap, and am trying to shift my Bootstrap directives into Angular. I decided on AngularStrap as it provided support for Bootstrap-Select (which I wasn't sure was the same for AngularUI). The tabs example only covered static html though. Is there any way via AngularStrap or AngularJS to load html fragments dynamically, so that it is only called when the tab is clicked? My html fragments need to execute javascript as well.
My reason for doing so is two-fold. First is that each tab contains quite a lot of content, and I do not wish to load all the tabs at once, which will slow down the loading. The second reason is that I prefer a more modular approach to my source code and not put everything on the same html file.
You can use the ng-include directive to load html fragments.
Using the AngularStrap Tab's example you can switch out the static content with the url to retrieve the html fragment. Here is an example based on the AngularStrap Tab example with these key changes:
1) $scope.tabs now has a page property instead of content pointing to either template1.html, template2.html, or template3.html.
$scope.tabs = [
{title:'Home', page: 'template1.html'},
{title:'Profile', page: 'template2.html'},
{title:'About', page: 'template3.html'}
];
2) An ng-include is added to display the currently selected tab's page.
<div ng-include src="tabs[tabs.activeTab].page"></div>
Note: I have the ng-include outside of the ng-repeat so each tab's page contents won't be loaded (even if not displayed).