I want to add some command button in two side of my ionic footer in many of my controller.
For example in FirstController I want Add and Edit button and in SecondController I want Remove and Send Button.
I add this to my main layout but this is static:
<div class="bar bar-footer bar-balanced">
<div class="title">My Program</div>
<button class="button button-outline button-light" ng-click="add()"><i class="ion-arrow-left-c"></i></button>
<button class="button button-outline button-light" ng-click="edit()"><i class="ion-arrow-right-c"></i></button>
</div>
Please guide me how to do this in ionic framework and angular.
Thanks for your attention
My approach :
Move your code for Add and Edit Buttons, and Remove and Send Button to different Service [1st and 2nd Service].
Create a middle man service, containing references to both of the services declared above [3rd Service].
this service will contain two generic methods, i.e. method1 and method2.
Now in your controllers, add reference to the 3rd Service.
yourApp.controller("myController", function(thirdService) {
$scope.thirdService = thirdService;
$scope.textForButton1 = "Text Based on Controller";
$scope.textForButton2 = "Text Based on Controller";
});
now, in your html :
<div class="bar bar-footer bar-balanced">
<div class="title">My Program</div>
<button class="button button-outline button-light" ng-click="thirdService.handleFirstButton()"><i class="ion-arrow-left-c">{{textForButton1}}</i></button>
<button class="button button-outline button-light" ng-click="thirdService.handleSecondButton()"><i class="ion-arrow-right-c">{{textForButton2}}</i></button>
</div>
Assuming that each of your controllers are mapped to pages referenced in different routes,
you can decide which method to invoke based on the route.
i.e. in your third Service :
app.service('thirdService', function($http, $location, $state) {
this.handleFirstButton = function() {
switch ($state.current.name.toString().toLowerCase().trim()) {
}
};
this.handleSecondButton = function() {
switch ($state.current.name.toString().toLowerCase().trim()) {
}
};
});
Just add your headers and footers to the view associated with the controller. In home.html...
<ion-header-bar class="bar bar-subheader" >
<h1 class="left">Home</h1>
</ion-header-bar>
<ion-content>
<ion-list>
etc...
</ion-list>
</ion-content>
<div class="bar bar-footer footer">
Footer Content including buttons
</div>
In your index.html, you'll have something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
... etc ....
</head>
<body ng-app="myapp">
<ion-pane ng-controller="HeaderController">
<ion-header-bar class="bar-stable">
header content
</ion-header-bar>
<ion-content>
<ion-nav-view>
</ion-nav-view>
</ion-content>
</ion-pane>
</body>
</html>
Of course, be sure to configure your routes. (This is boilerplate routing for Ionic apps). In app.js....
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'HomeController'
})
})
Controllers can be defined in the normal way, possibly using Services to share functions between controllers.
Related
I'm having trouble finding the best way to inject static html from a file into the middle of my view. I have a component called eula-dialog in which the component doesn't do anything yet but the view looks like this:
eula-dialog.component.html
<h1 md-dialog-title>Sign EULA</h1>
<mat-dialog-content>
<!-- HOW TO INJECT A FILE HERE -->
<div> REPLACE ME WITH CONTENTS OF FILE</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-checkbox [(ngModel)]="agreeCheckbox">I have read and agree to the eula</mat-checkbox>
<button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox">
I Agree
</button>
</mat-dialog-actions>
I have a folder structure that looks like this:
eula-dialog
eula-dialog.component.html
eula-dialog.component.scss
eula-dialog.component.spec.ts
eula-dialog.component.ts
very-long-readonly-eula-template.html
I can't modify the contents of the eula HTML, which has mostly text and some html elements but is not a complete page, it looks like this:
<p>Title</p>
<div> LOTS OF TEXT </div>
What's the best way to do this?
Also it would be best that this eula html file/template doesn't load with the app all the time but only gets sent to the client when needed.
Put static files in assets folder else tell angular to mark it as asset in angular.json.
Then use
<h1 md-dialog-title>Sign EULA</h1>
<mat-dialog-content>
<!-- HOW TO INJECT A FILE HERE -->
<div [innerHTML]="eulaContent">...</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-checkbox [(ngModel)]="agreeCheckbox">I have read and agree to the eula</mat-checkbox>
<button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox">
I Agree
</button>
</mat-dialog-actions>
// In .ts file
import { DomSanitizer} from '#angular/platform-browser';
eulaContent = '';
constructor(private sanitizer: DomSanitizer)
ngOnInit(){
fetch('/assets/yourlocation.html').then(res => res.text()).then(data => {
this.eulaContent = this.sanitizer.bypassSecurityTrustHtml(data);
})
}
I am trying to run my ionic app with xcode by doing:
ionic package build ios
ionic cordova prepare
Then I open up xcode and do Clean and Run. When on the device the scrolling acts like this:
My HTML looks like this:
...
<ion-content no-padding>
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
<div class ='contentone' [#moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item class="changepadding" *ngFor="let z of items ; let i = index" (click)='expandItem(i)' id='{{i}}' #feedstyle text-wrap>
<div class="flex" #flex>
<div class="nonzoomimage">
<img class="imagepost" src="{{z.pic}}">
</div>
<div class="descholder">
<div class='description'>{{z.description}}</div>
<div class='link'>{{z.link}}</div>
</div>
</div>
<div class="feedtoptextcontainer" #feedtop>
<div class="imageparent">
<img class="postprofilepic" src="{{z.pic}}">
</div>
<div class="usernamecontainer">
<h4 class="postusername">Ed Bundy</h4><br>
<h4 class="poststudio">Ed's Studio</h4>
</div>
<div class="postprofilelink">
<div class="book">Book</div> #edbundyhair
</div>
</div>
<img class="imageposttwo" #imagepost src="{{z.pic}}">
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>
</ion-content>
...
My doInfinite function, of ion-infinite-scroll looks like this, it is empty, just a placeholder right now - it does nothing:
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 500);
})
}
It just glitches when you try to scroll - and doesn't scroll at all, doInfinite fires because I can see the log message.
Ionic by default uses the Ionic scroll, which simulates the Momentum Scrolling as seen on the iOS devices, by adding the overflow-scroll=true attribute, it will basically use this particular ion-content to use the native scrolling (if you want a global effect check out the following link.
http://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/
Please also check if css classes are affecting the style of the element!
Is it only doing the bug when you scroll upwards? If yes, try to check this:
ion-infinite-scroll fires when scrolling up - Ionic
Can you try to start with and build something simple like this?
<ion-infinite-scroll (ionInfinite)="fetchMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and on your .ts
fetchMore(event) {
console.log('Begin fetching more data');
setTimeout(() => {
console.log('Async operation has ended');
event.complete();
}, 500);
}
Not sure why your code would cause that glitch but if you happen to make something simple as this work, you'll find out what causes the bug as you build it back up to what you have.
Could be that the $event.waitFor() still has its issues. If you need to wait for a promise like when you're fetching more data. you can have something like this.
fetchMore(event) {
this.fetchingDataService.fetchPromise().then(
(moreData) => {
//append moreData
event.complete();
},
(err) => {
//do something with error
event.complete();
}
);
}
Found the problem. After upgrading to Ionic 3, at least in my case, the swipe event on an ion-list in an ion-scroll freeze my scroll.
<ion-scroll scrollY="true">
<ion-list padding (swipe)="someThing($event)"> <!-- There, swipe, removing it make my ion-scroll scrollable again -->
<ion-item>
<p>1</p>
</ion-item>
....
<ion-item>
<p>9999</p>
</ion-item>
</ion-list>
</ion-scroll>
I am making an ionic 1 application and I want to open a page when I click on a button I have tried to do so using online tutorials but none seems to help me.I know how to do it in HTML but I'm new to angular.
Index.html
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<div class="bar bar-header">
<h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
<div class="button-bar bar-balanced">
<a class="button">First page </a>
<a class="button">Second page </a>
<a class="button">Third page</a>
</div>
</div>
<ion-content>
</ion-content>
</ion-pane>
</body>
App.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Ionic uses angular's ui routing by default, so you can do something like this:
angular.module('starter', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("first", {
url: "/first",
template: "<div>This is first page</div>"
});
// other states
// default
$urlRouterProvider.otherwise("/first");
});
Then in your button:
<a class="button"
ui-sref="first">First page </a>
And somewhere to let Ionic know where to load your views:
<ion-nav-view></ion-nav-view>
With ui-sref, it changes the state of the html page since angular is a single page application, no on-click is required for this, whatever you name the state of your page is what you call within the ui-sref. For instance
.state('thispage', {
url: 'thispage',
templateUrl: '/thispage.html',
// controller: 'thispageCtrl'
}
All this is within the state Provider..
in angular 2 I need to create a large html-template with redundant parts.
Therefore I want to create multiple html-templates and put them together by including them in the main html-file (like ng-include in angular1)
But how can I include sub-templates in the main-template?
example:
<!-- test.html -->
<div>
this is my Sub-Item
<!-- include sub1.html here-->
</div>
<div>
this is second Sub-Item
<!-- include sub2.html here-->
</div>
-
<!-- sub1.html -->
<div>
<button>I'am sub1</button>
</div>
-
<!-- sub2.html -->
<div>
<div>I'am sub2</div>
</div>
You can create components like sub1 sub2 etc. And On those child components add these html files as template .
On main html call the component selectors respectively. It will work
Let me tell you first of all that ng-include from Angular1.x is not supported by Angular2 so obviously $Compile is not present in Angular2. So, you can go ahead with CRF-ComponentFactoryResolver as shown here to add HTML dynamically with angular context.
DEMO--(CFR) : https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview
If your HTML piece has angular context, you should use CFR-ComponentFactoryResolver.
As in sub1.html, you have button, you might want to click it and fire its click event. This can be achieved with CFR as shown below,
You can do lot with CRF. This is probably the easiest example.
#Component({
selector: 'my-app',
template: `
<button (click)="addComponents()">Add HTML (dynamically using CRF)</button>
<h1>Angular2 AppComponent</h1>
<hr>
<div>
<h5>sub1.html goes here</h5>
<div class="container">
<template #subContainer1></template>
</div>
</div>
<hr>
<h5>sub2.html goes here</h5>
<div class="container">
<template #subContainer2></template>
</div>
`,
})
export class App {
name:string;
#ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;
#ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef;
constructor(
private compFactoryResolver: ComponentFactoryResolver
) {
this.name = 'Angular2'
}
addComponents() {
let compFactory: ComponentFactory;
compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
this.subContainer1.createComponent(compFactory);
compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component);
this.subContainer2.createComponent(compFactory);
}
}
}
I am developing an website with AngularJS and
mobile angular UI.
I have a menu bar which will show on clicking a button and should be closed when I click the options in it. But it isn't working as expected.
My files:
index.html
<div id="menuBar" ng-show="showMenu">
<div class="row">
page1
</div>
</div>
js for hiding menu
app.controller('mainController', function ($rootScope, $scope) {
$rootScope.showMenu = false;
$rootScope.$on("$routeChangeStart", function () {
$rootScope.showMenu = false;
});
});
So while switching to some other file the menu should hide ideally. But it didn't happen so.
The problem is how you show your menu. With this code:
<div ng-click="showMenu=!showMenu" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
you change showMenu property of the child scope. This showMenu is not the same as $rootScope.showMenu. For this reason when you change $rootScope.showMenu in $routeChangeStart it doesn't effect child scope property. Instead you should do something like this:
<div ng-click="toggleMenuBar()" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
and in controller:
$scope.toggleMenuBar = function() {
$rootScope.showMenu = !$rootScope.showMenu;
};