I have an onsen-ui project with several pages. I have the same navigator control on each of these pages. Is there anyway I can extract this navigator control out of all my pages and keep it one file, then import/include this file in all my pages? In C# I can create a UserControl and include this UserControl in all my pages. I'm looking for something similar in Onsen-UI.
Consider the following:
<ons-page ng-controller="MyController as myCtrl">
<div class="navigation-bar">
<div class="navigation-bar__left">
<ons-toolbar-button ng-click="myCtrl.back()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>
</div>
<div class="navigation-bar__center">
My Page
</div>
<div class="navigation-bar__right">
<ons-toolbar-button ng-click="myCtrl.doSomeTask()"><ons-icon icon="fa-cog"></ons-icon></ons-toolbar-button>
</div>
</div>
<ons-scroller>
/*... my page content...*/
</ons-scroller>
</ons-page>
The "navigation-bar" div I'd like to extract out to some other file and include/import in all my other pages. Can someone tell me how to do this?
I figured it out. The trick is to use "ng-include".
So in my controller-page I have:
<ons-page ng-controller="MyController as myCtrl">
<ng-include src="'incNavBar.html'"></ng-include>
<ons-scroller>
/*... my page content...*/
</ons-scroller>
</ons-page>
And I have another filed called incNavBar.html which includes the following:
<div class="navigation-bar">
<div class="navigation-bar__left">
<ons-toolbar-button ng-click="myCtrl.back()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>
</div>
<div class="navigation-bar__center">
My Page
</div>
<div class="navigation-bar__right">
<ons-toolbar-button ng-click="myCtrl.doSomeTask()"><ons-icon icon="fa-cog"></ons-icon></ons-toolbar-button>
</div>
</div>
Keep in mind you must use both double and single quotes for the src attribute as I've done above.
Related
I'm using tabs in an html page and I'm trying to declare one controller for each tab.
<div class="tab-content">
<div class="tab-pane active" id="customerInfo">
#customerList()
</div>
<div class="tab-pane" id="communities">
#communityList()
</div>
For the first tab I declare my controller in "customerList" like this :
<div class="block full" ng-controller="customerCtrl">
and I tried the same thing with the second tab but it didn't work. Any help please.
This is possible and judging from here you can do this as simple as:
<body ng-app="">
<div class="tab-content">
<div class="tab-pane active" id="customerInfo" ng-controller="customerListcontroller">
#customerList()
</div>
<div class="tab-pane" id="communities" ng-controller="communityListcontroller">
#communityList()
</div>
</div>
</body>
There are few things you might be doing wrong:
forget to put ng-app="app" to wrap your controllers
From the question there is a div omission. Make sure this is not the case in the code
Not defining your controllers properly.
Not calling the file containing the controller in the HTML file
It should be a minor fix. You can also take a look at this.
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
I have an strange issue with displaying graphs in AMD Layout.
There are two widgets in which I've defined graphs and here is how it looks like - you can see that graphs in widgets go out of their area
I've tried reproduce this bug in plunker and there is nothing wrong :/
When I make a small change in browser (for example, I move the edge of the browser), graphs return to the right place -> http://recordit.co/mRmNAjH840
<div layout="row" ng-controller="GraphCtrl" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="66" flex-gt-md="66">
<div class="panel-heading">Widget1<span flex=""></span>
</div>
<div class="panel-body">
<div id="chart1"></div>
</div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="32" flex-gt-md="32">
<div class="panel-heading">Widget2<span flex=""></span>
</div>
<div class="panel-body">
<div id="c3_combined"></div>
</div>
</section>
</div>
I'm not sure if this is related to your problem, but on IE, I have to add this CSS property manually :
svg { overflow: hidden; }
If I have two <div ng-view></div> elements on the same page, angular.js only uses the first one. I am looking to have two templates (with two controllers and two partials) rendered on the same page, how do I do that? The code below does not work but I'd like to have something along these lines.
<div class="row">
<div class="large-6 small-12 columns">
<div ng-controller="SitesHomeCtrl" >
<div ng-view>
</div>
</div>
</div>
<div class="large-6 small-12 columns">
<div ng-controller="UsersMeetCtrl" >
</div>
</div>
</div>
ui-router is the best option but if you are going with $routeProvider, you could use ng-include (with ng-show/ng-hide) or ng-switch to achieve the same.
I imagine you're probably going to want to look at ui-router in place of angular's router at this point, as angular's router does not support multiple ng-view elements.
I am building a wizard in angular using the angular-ui bootstrap modal component.
In my main page, I am already using ng-views for navigation.
The goal is to create a modal wizard on one of these pages. As far as I can see,
nested ng-views are not supported. If possible, I would like to keep each step of
the wizard as an external resource.
A terrible way to accomplish this at the moment is something to this effect:
<div id="wizardModal" class="modal hide">
<div class="modal-header">
<div ng-show="isCurrentStep(1)">
<p>Step1 header</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 header</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 header</p>
</div>
</div>
<div class="modal-body">
<div ng-show="isCurrentStep(1)">
<p>Step1 body</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 body</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 body</p>
</div>
</div>
<div class="modal-footer">
<div ng-show="isCurrentStep(1)">
<p>Step1 footer</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 footer</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 footer</p>
</div>
</div>
</div>
Obviously, the above is unacceptable and will create maintenance nightmares.
Is there a clean approach to accomplishing the same effect?
Using ng-include worked like a charm, thanks.
You can find a tutorial about creating a wizard-style app using ng-view and ngRouter here.
I believe this approach is much better since you can have individual controllers per step that inherit the scope from the host form thus keeping all the data but separating the logic.