I am stuck with an issue in my ionic app that has a side menu with name and picture and it's parent and abstract:true. In that same controller, there is an update function where it updates scope.picture, but the side menu picture is not updated.
controller('AppCtrl', function($scope,$window,$rootScope,$location,$http,$state,$cordovaCamera,$ionicLoading,$q,login_Service)
{
$scope.user_Name=$rootScope.u_name;
$scope.uid=$rootScope.user_id;
$scope.pass=$rootScope.password;
$scope.user_Picture=$rootScope.pic;
$scope.whats=$rootScope.wh;
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
});
this is side-menu template
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-light nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<!-- Sidebar Content -->
<ion-content class="gem-sidebar dark">
<!-- Profile Box - Extends ionic's .row -->
<div class="row gem-sidebar-profile-box">
<!-- Profile Thumb -->
<div class="col col-25">
<img src="img/gemionic/no-photo.jpg" ng-if="!user_Picture" class="gem-profile-image" alt="">
<img src="http://www.cssolutionshub.com/php/images/user_img/{{user_Picture}}" ng-if="user_Picture" class="gem-profile-image">
</div>
<!-- End Profile Thumb -->
<!-- Profile Name -->
<div class="col col-50">
<h6> <a menu-close href="#" ng-click="edit_prof()">Edit Profile</a></h6>
<h5 ng-if="user_Name !== undefined">{{user_Name}}</h5>
<h4>{{whats}}</h4>
</div>
<!-- End Profile Name <a -->
<!-- Account Settings Icon -->
<div class="col col-25 gem-text-center">
<i class="gem-profile-settings-icon ion-volume-high"></i>
</div>
<!-- End Account Settings Icon -->
</div>
<!-- End Profile Box -->
<!--<ion-list>
<ion-item class="item-ng-click" nav-clear menu-close ng-click="login()">Login</ion-item>
<ion-item nav-clear menu-close href="#/app/feed">Feed</ion-item>
<ion-item nav-clear menu-close href="#/app/start">Starter View</ion-item>
</ion-list> -->
</ion-content>
<!-- End sidemenu content -->
</ion-side-menu>
</ion-side-menus>
and this is my edit template where update function is clicked
<!-- Title for header bar (refer to www/index.html) -->
<ion-view title="Edit Profile">
<!-- ======================
LEFT SIDE BUTTON
====================== -->
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<!-- ======================
RIGHT SIDE BUTTON
====================== -->
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-checkmark-circled"></button>
</ion-nav-buttons>
<!-- ======================
MAIN CONTENT SECTION
====================== -->
<ion-content class="has-header gem-ion-content profile-edit">
<!-- ======================
GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- <div class="gem-profile-media">
<div class="gem-profile-details profile2">
<div class="text-center">
<i class="icon ion-plus-circled add-user-pic-icon"></i>
<p class="uppercase">Add user pic</p>
</div>
</div>
</div> -->
<img ng-if="topic.picture !== undefined && img===undefined " ng-src="http://www.cssolutionshub.com/php/images/user_img/{{topic.picture}}" alt="" width="100%" height="20%" ng-click="addMedia()">
<img ng-if="topic.picture === undefined && img===undefined" ng-src="img/gemionic/no-photo.jpg" width="100%" height="20%" ng-click="addMedia()">
<img src="{{img}}" ng-if="img!==undefined" width="100%" height="20%" ng-click="addMedia()">
<!-- ======================
END GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- Standard Ionic List -->
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">What Now</span>
<input type="text" ng-model="topic.whats">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="password" ng-model="topic.password">
</label>
<button class="button button-full button-positive" ng-click='update_u(topic)'>
Update
</button>
<button class="button button-full button-positive" ng-click='go_feed()'>
Cancel
</button>
</div>
</ion-content>
</ion-view>
Try the following:
$scope.update_u=function(topic){
$scope.whats = topic.whats;
$scope.user_Picture=topic['picture'];
}
You may try this (inside the AppCtrl). The code inside $ionicView.beforeEnter function will be executed everytime the view is called:
$scope.$on('$ionicView.beforeEnter', function () {
// Code you want executed every time view is opened
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
}
This also may be due to caching of your controller. You can stop it at the route.js by using cache: false, line. See this for a similar solution:
Related
I had this warning of trying to load angular more than once and I Solve it by changing the order of my script tags on my Index.html page, but the problem is that when I build the app It still doesn't work even after the warning has disappeared !
Those are the scripts that caused the issue in the first place
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
I solved This by removing the script that calls ionic.bundle.js and by placing the other scripts after all the script are called
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy">
<title></title>
<!-- weather font -->
<link href="css/weather-icons.min.css" rel="stylesheet">
<!-- ionic gallery -->
<link href="lib/ionic-gallery/css/ion-gallery.css" rel="stylesheet">
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- style.css -->
<link rel="stylesheet" href="css/style.css" />
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- angular-nl2br js -->
<script src="lib/angular-nl2br/angular-nl2br.min.js"></script>
<!-- ionic number picker -->
<script src="lib/ionic-numberpicker/dist/ionic-numberpicker.bundle.min.js"></script>
<!-- elastic js-->
<script src="lib/angular-elastic/elastic.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- google maps javascript -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<!-- ionic gallery -->
<script src="lib/ionic-gallery/js/ion-gallery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced" align-title="center">
<!-- Back button -->
<ion-nav-back-button>
Back
</ion-nav-back-button>
<!-- Burger button -->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- Cart button -->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-android-more-vertical" ui-sref="home">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Main view content -->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-content>
<!-- User profile -->
<div class="text-center">
<a ui-sref="user({userId: 0})">
<img class="profile-picture circle" menu-close="" src="img/thumb/adam.jpg">
<h4>Adam Lambert</h4>
</a>
</div>
<!-- Menu -->
<div class="list" menu-close="">
<div class="item item-icon-left" ui-sref="home">
<i class="icon ion-ios-home-outline"></i>
Home
</div>
<div class="item item-icon-left" ui-sref="nearby">
<i class="icon ion-ios-location-outline"></i>
Nearby
</div>
<div class="item item-icon-left" ui-sref="chats">
<i class="icon ion-ios-email-outline"></i>
Message
<span class="badge badge-assertive">2</span>
</div>
<div class="item item-icon-left" ui-sref="ticket">
<i class="icon ion-android-plane"></i>
Flight booking
</div>
<div class="item item-icon-left" ui-sref="weather">
<i class="icon ion-ios-cloud-outline"></i>
Weather
</div>
<div class="item item-icon-left" ui-sref="gallery">
<i class="icon ion-images"></i>
Photos
</div>
<div class="item item-icon-left" ui-sref="friends">
<i class="icon ion-ios-people-outline"></i>
Friends
</div>
<div class="item item-icon-left" ui-sref="taxi">
<i class="icon ion-model-s"></i>
Taxi
</div>
<div class="item item-icon-left" ui-sref="shopping">
<i class="icon ion-bag"></i>
Shopping
</div>
<div class="item item-icon-left" ui-sref="currency">
<i class="icon ion-card"></i>
Currency
</div>
<div class="item item-icon-left" ui-sref="login">
<i class="icon ion-log-out"></i>
Logout
</div>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
And with those changements the warning disappeared but the app still doesn't work on the mobile device!
Here is my simple code for a demo Ionic Application.
<body ng-app="starter" ng-controller="catego">
<ion-pane >
<ion-header-bar class="bar bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Hardware Shop</h1>
<button class="button button-clear icon ion-plus-circled" ng-click="popover.show($event)"></button>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem"/>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</label>
</div>
<ion-content class="has-subheader" style="padding:5px !important;">
<ion-refresher pulling-text="Refreshing..." on-refresh="dorefresh()"></ion-refresher>
<div class="list" >
<div ng-repeat="element in data | filter : searchitem| orderBy : 'category'">
<div class="item item-divider">{{ element.category }}</div>
<ion-list can-swipe="true">
<ion-item class="" href="#" ng-repeat="innerelement in element.companies | filter : searchitem | orderBy : 'toString()' track by $index">
--- {{innerelement}} <br/>
<ion-option-button class="button-positive icon ion-edit"></ion-option-button>
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-pane>
</body>
The button in my subheader which says NOTWORKING is not working. I have made sure that there are no errors in the console and all other methods are working fine. Is there something I am missing?
Any help is highly appreciated.
You have to move the <button> outside the <label> as in the code below:
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem" />
</label>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</div>
I found better this, This is working fine on my app, Nice gesture on Ios Also
$scope.$on('$stateChangeSuccess', function() {
$('*[ng-click]').each(function() {
$(this).attr("ng-click");
$(this).attr("on-touch", $(this).attr("ng-click"));
});
});
At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:
When really, I would like the the header items of What are you looking for? and Current location to be fixed:
This is my code so far:
<ion-view view-title="Nearby">
<ion-content>
<!-- Search -->
<div class="list">
<div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
<label class="item-input-wrapper">
<input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
</label>
<div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
<label class="item-input-wrapper">
<input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
</label>
<button class="button button-positive button-small" ng-click="location=''; services=''">
<i class="ion-close"></i>
</button>
</div>
</div>
<!-- List of services -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
{{service.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{service.total}}</span>
</i>
</ion-item>
</ion-list>
</div>
<!-- List of regions -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
{{location.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{location.count}}</span>
</i>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I've also created a CodePen here: http://codepen.io/anon/pen/VeQzBv.
You can use a sub-header for this it work for my code:
<ion-header-bar class="bar-light bar-subheader">
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
<button ng-if="searchForce.length"
class="button button-icon ion-android-close input-button"
ng-click="clearSearch()">
</button>
</ion-header-bar>
Codepen demo
Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721
I'm trying to implement a side-bar on my app so I am able to store menu related options inside it, but my issue is that whenever I integrate the ion-side-bar-menu, it always hides my main content.
For example, Whenever I don't add the side bar directives in my code, everything works as fine, even when I'm using the ionic-header-bar directives. But whenever I wrap my header bar inside the side-menu, everything outside of it disappears. Its as if the side-menu pushes or overlaps all other existing content unless I remove it from the DOM.
Refer to the screenshots below. I should be seeing the content to the right of the side-menu:
Thank you!
http://codepen.io/JalenMoorer/pen/MaGVKV?editors=101#0
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>
You have to add the slide-box in an ion-content container & add the "has-header" class to it so that it can take the ion-nav-header into account. That said, here is the solution:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
<ion-content class="has-header">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script>
angular.module('ionicApp', ['ionic', 'ngMaterial'])
.controller('MyCtrl', function ($scope) {
});
</script>
</body>
</html>
I recently tried creating an ionic side menu. I had a problem where when I swiped the main body it opened up the menu. But I took the swipe function off and now I can't open the menu. I want to be able to click the navicon icon to be able to open the menu but don't know how to do it.
Here is the JavaScript:
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is the header code which contains the button:
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<td-cards class="theLabel" id="card" ng-repeat="task in activeProject.tasks">
<td-card class="card-{{card.index}}">
<h4 style="text-align:center"> {{task.title}}</h4>
</td-card>
</td-cards>
Here is the menu content:
<ion-side-menu side="left">
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
<edge-drag-threshold="true" drag-content="true">
</ion-content>
</ion-pane>
</ion-side-menus>
Ionic has a handy menu-toggle directive to use so you can toggle the menu on a button like this.
http://ionicframework.com/docs/api/directive/menuToggle/
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
In index.html, replace menu-toggle="left" with ng-click="toggleProjects()" and in app.js add this
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is what I do:
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{ activeProject.title }}</h1>
</ion-header-bar>
In app.js, check with $ionicSideMenuDelegate.isOpen()
$scope.toggleSideMenu = function() {
if ($ionicSideMenuDelegate.isOpen()) {
$ionicSideMenuDelegate.toggleLeft(false); // close
} else {
$ionicSideMenuDelegate.toggleLeft(); // open
}
};