I am using the following solution to create a Ionic Modal service, but at the moment, I am finding it difficult to pass in a into my modal. What can I do to rectify this:
controller.js
$scope.confirmBookingModal = function(val) {
console.log(val);
ModalService.show('templates/modals/confirm-booking.html', 'ConsumerBusinessProfileCtrl as vm', val);
}
modal
<ion-modal-view ng-controller="ConsumerBusinessProfileCtrl">
<ion-header-bar>
<h1 class="title">Confirm</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeModal()">Close</button>
</div>
</ion-header-bar>
<ion-header-bar class="bar bar-subheader bar-dark modal-padding">
<h1 class="title">{{ vm.val }} services booked at £110 for 2 hours</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-modal-view>
val outputs a value into the console, so there is some data in there, but I am not sure whether I am accessing it the correct way from the modal.
Since you are already specifying your controller in your .show() method call, you don't need it in the modal template. Change the modal template as:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Confirm</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeModal()">Close</button>
</div>
</ion-header-bar>
<ion-header-bar class="bar bar-subheader bar-dark modal-padding">
<h1 class="title">{{ vm.val }} services booked at £110 for 2 hours</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-modal-view>
This fixed it:
$scope.confirmBookingModal = function() {
var vm = $scope;
ModalService.show('templates/modals/confirm-booking.html', 'ConsumerBusinessProfileCtrl as vm');
}
Related
I'm trying to execute Javascript in a ionic modal (HTML) page. It may sound weird, because normally it think you put JS code into a JS file and use data binding to work with js in html, right? But in this case i only can change this specific html file.. So this is what i tried:
<div class="modal">
<ion-header-bar class="bar-secondary">
<h1 class="title">TEST-TITLE</h1>
<button class="button button-clear button-dark" ng-click="modal.hide()"><i class="icon ion-close"></i></button>
</ion-header-bar>
<ion-content class="has-header" delegate-handle="TEST">
<div class="list card">
<div class="item item-body" ng-App="myApp" ng-controller="myCtrl">
<img src="pathToFile.jpg" class="full-image">
<p>
TEXT
</p>
<button class="button button-positive" ng-click="testFunction()">
TEST-BUTTON
</button>
</div>
</div>
</ion-content>
</div>
<script>
var app = angular.module('myApp', ['ionic']);
app.controller('myCtrl', function($scope) {
$scope.testFunction = function () {
$scope.firstName = "John";
$scope.lastName = "Doe";
alert($scope.firstName);
};
});
</script>
But i cannot run the function "testFunction()" after clicking on TEST-BUTTON. Does anyone know what to do?
Update:
This is how the modal is called in the extended js file:
// Fetch the modal and store it in scope
$ionicModal.fromTemplateUrl('pathToModal', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
I have a problem that become a realy nightmare. I build a mobile chat app with Ionic, Angular and Firebase. The message exchange works well, but i have problem with auto scroll do bottom when received new messages, i try use $ionicScrollDelegate, scroll-glue Directive, Jquery function and nothing works.
Page chat
<div ng-controller="ChatController as chatCtrl" id="chats_page" class="upage-content vertical-col left hidden has-subheader">
<div class="bar bar-subheader subheader-chat">
<h2 class="title">{{chatCtrl.status}}</h2>
</div>
<div class="" data-uib="layout/row" data-ver="0" id="chatBox">
<ion-content id="autoscroll" class="widget uib_w_92 d-margins topbar" data-uib="ionic/list" data-ver="0" delegate-handle="mainScroll">
<ion-list scroll-glue>
<ion-item ng-repeat="msg in chatCtrl.messages" class="item widget uib_w_93 chat-cliente item-text-wrap" data-uib="ionic/list_item" data-ver="0" ng-class="chatCtrl.getRole(msg.role)">{{msg.text}}<a class="chat-time">{{msg.time}}</a>
</ion-item>
</ion-list>
</ion-content>
</div>
<div class="bar bar-footer footer-chat" >
<i class="placeholder-icon "></i>
<textarea type="text" name="msg" placeholder="Digite sua mensagem..." class="chat-text" ng-disabled="chatCtrl.msgText()" ng-model="myMsg" ></textarea>
<button class="button ion-paper-airplane btn-chat-send" ng-click="chatCtrl.sendMsg(myMsg)" ng-disabled="chatCtrl.msgText()" id='btn_send_chat'></button>
</div>
</div>
And piece of ChatController
angular.module('myApp')
.controller("ChatController", ['User','FireBaseApp','$firebase','$ionicLoading','$timeout','$ionicPlatform','$location','$ionicHistory','$timeout','$ionicPopup','$ionicScrollDelegate','$scope',function(User, FireBaseApp ,$firebase, $ionicLoading,$timeout,$ionicPlatform,$location,$ionicHistory,$timeout,$ionicPopup,$ionicScrollDelegate,$scope){
var self = this;
... pieces of code ...
self.sendMsg = function(msg){
$scope.myMsg = null;
$ionicScrollDelegate.scrollBottom();
}
You can use.
$ionicScrollDelegate.scrollBottom(true);
Example on codepen
After a year i found a solution: Separate my app in angular template and finally scrollglue works.
I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})
i am kinda new to this UI-Routing concept, so i was wondering the following.
Is it possible to change a top view from within a nested one.
So we start at index and call Account state within that view i call the Account.login view by using:
<a ui-sref="Account.login"></a>
Now is it possible to call the Index state again from within Account.login view and how would one accomplish that.
.state('Home', {
url: "/",
templateUrl: "pages/Home.html",
})
.state('Account', {
url: "/profile",
templateUrl: "pages/Account.html"
})
.state('Account.login', {
url: "/login",
templateUrl: "pages/Account_Login.html"
})
.state('Account.register', {
url: "/register",
templateUrl: "pages/Account_Register.html"
})
Working with Ionic Framework.
Main Page:
<ion-header-bar align-title="center" class="custom_Header">
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon" style="background-color:#4D8693"></button>
</div>
<h1 class="title"><a ui-sref="Home" style="text-decoration: none"><img src="img/Header.png" /></a></h1>
<div class="buttons">
<button menu-toggle="right" class="button button-icon icon ion-gear-b" style="background-color:#4D8693"></button>
</div>
</ion-header-bar>
<ion-content class="has-header">
<ion-nav-view></ion-nav-view>
</ion-content>
Account.html:
<div class="has-header">
<a ui-sref="Home">
<img src="img/test.png" />
</a>
</div>
If i now press on that image on Account view, it will return me to my main page but without my buttons in the header, the image in the middle is still there.
Including: http://play.ionic.io/app/2f5cc1913037
When I put my ion-header-bar in a seperate file (header-dash.html) and assign it as a directive "headerDash", I seem not to be able to access my DashCtrl or the controller of my view where the header-dash directive is called. More specific, in the code below, I cannot call the function changeDashMode(). However, when I replace <header-dash></header-cash> with the content of header-dash.html, then everything works fine.
I guess it has something to do with the setup of the directive, anyone thoughts?
Update: newImport() also in header-dash does work... it is when I added another function changeDashMode that it does not work. What is going on?
controllers.js
.controller('DashCtrl', function($scope) {
// -------------------------------------------------------------------------
// Init
$scope.dashMode = false;
// ---------------------------------------------------------------------------
$scope.changeDashMode = function() {
console.log("test")
if (!$scope.dashMode) {$scope.dashMode = true;} else {$scope.dashMode = false;}
}
// and the rest of the controller
// ...
})
header-dash.html
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button button-light" ng-click="newImport()">+ New</button>
</div>
<h1 class="title"><logo></logo></h1>
<div class="buttons" ng-controller="DashCtrl">
<button class="button button-light" ng-show="!dashMode" ng-click="changeDashMode()">Select</button>
<button class="button button-light" ng-show="dashMode" ng-click="changeDashMode()">Edit</button>
</div>
</ion-header-bar>
tab-dash.html
<ion-view view-title="Dashboard">
<header-dash></header-dash>
<ion-content has-bouncing="true" has-header="true">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item>Select mode? {{dashMode}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
directives.js
angular.module('starter.directives', [])
.directive('headerDash', function() {
return {
restrict: 'E',
templateUrl: 'templates/header-dash.html' // tried to add controller: "DashCtrl" but that didnt work
}
})
Is tab-dash.html being the template displayed by the DashCtrl?
Because in header-dash.html, you're using ng-controller again, creating an child scope, effectively having DashCtrl in DashCtrl
<div class="buttons" ng-controller="DashCtrl">