We Keep Coding

Why the angularjs one-way bind function run twice?

I have a modal view:
<ion-content id="friendContent" class="scroll-content has-header has-subheader" style="background-color: rgba(0, 0, 0, 0.6);">
<ion-list class="list">
<ion-item ng-repeat="objFriendInfo in objFriendInfoList | filter:{ Remark: data.searchQuery }" class="item item-avatar-left item-button-right searchFriendItemBackgroundColor"
ng-click="FriendList('chat',objFriendInfo,$event)">
<img class="imgFriendUser" ng-class="{ 'gray':objFriendInfo.state == 0 }" ng-src="{{::objFriendInfo.icon }}">
<h2 class="light">{{::GetAndSaveFriendName('friendlist_UserName',objFriendInfo.Remark,'16px', objFriendInfo) }}</h2>
<h3 class="positive" ng-click="FriendList('travellog',objFriendInfo,$event)">{{::GetAndSaveFriendTravellogName('friendlist_TravellogName',objFriendInfo.TravelLog_Name,'14px', objFriendInfo) }}</h3>
<div class="buttons" style="top:15px !important;">
<button class="center button button-small button-positive ion-edit" ng-if="objFriendInfo.id != user.id" style="font-size:16px;" ng-click="FriendList('remark',objFriendInfo,$event)"></button>
<button class="center button button-small button-positive icon-mapsay_delete" ng-if="objFriendInfo.id != user.id" style="font-size:25px;" ng-click="FriendList('delete',objFriendInfo,$event)"></button>
</div>
</ion-item>
</ion-list>
</ion-content>
and the function GetAndSaveFriendName code is:
$scope.GetAndSaveFriendName = function (name, text, fontSize, objFriendInfor) {
var strDisplayName = "";
console.log(text);
if (objFriendInfor.strDisplayName) {
strDisplayName = objFriendInfor.strDisplayName;
} else {
strDisplayName = ServiceForChatCommon.GetShowDivText(name, text, fontSize);
objFriendInfor.strDisplayName = strDisplayName;
}
return strDisplayName;
};
The problem is the function GetAndSaveFriendName will run twice, what's the reason?
[EDIT]
I decalre the controller like:
.config([
'$stateProvider',
function ($stateProvider) {
$stateProvider
.state('tabs.chat', {
url: '/chat',
views: {
'chatView': {
templateUrl: 'components/chat-component/chat-view.html',
controller: 'chatController'
}
}
})
}]);

I think I found the reason. The $digest of AngularJs run at least twice, the second recyle make sure the DOM is the up-to-date.

Ionic/Angular: Using the Master detail pattern, the details page isn't showing up?

My app uses tabs, a side menu, and the master details pattern. But, for some reason, when I try to navigate to the details page of an item in the list, nothing comes up. I'm not sure if I have the routing wrong or something.
If someone could help me out, I would really appreciate it! This is driving me crazy!
Thanks!
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('event-detail', {
url: '/event-detail/:name',
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
})
tab-feed.html
<ion-view view-title="Feed" class="tab-feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/event-detail/{{event.name}}">
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
EventDetailsController
.controller('EventDetailCtrl', ['getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var name = $stateParams.name;
$scope.event = getLocalStorage.getEvent(name);
}])
getLocalStorage Service
.factory('getLocalStorage', function () {
var eventList = [];
return {
list: eventList,
updateEvents: function (eventsArr) {
if (window.localStorage && eventsArr) {
localStorage.setItem("events", angular.toJson(eventsArr));
}
//update the cached version
eventList = eventsArr;
},
getEvents: function () {
eventList = angular.fromJson( localStorage.getItem("events") );
return eventList ? eventList : [];
},
getEvent: function(name){
for(i=0;i<eventList.length;i++){
if(eventList[i].name == name){
return eventList[i];
}
}
}
};
})

Can you try the following:
1) Add abstract: true to your tabs state:
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
abstract: true,
templateUrl: 'templates/tabs.html'
})
2) In your EventDetailsCtrl, if you're thinking of minification, add all your injection parameters, in order, before function... like this:
.controller('EventDetailCtrl', ['$scope', 'getLocalStorage', '$stateParams', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
If the above doesn't help, please post your tabs.html code.

Ionic: Master Detail with tabs and side menu navigation issue?

My app uses tabs, a side menu and a master detail pattern. But, for some reason, I can't figure out how to make it navigate to the detail page of an item in the list. I've been trying to figure it out for days but I'm pretty new to Ionic and Angular...
If anybody could tell me what's wrong, I would really appreciate it.
tab-feed.html
<ion-view view-title="Feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.name}}">
<!-- <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" ui-sref="event({eventId:event.id})">-->
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
tabs.html
<ion-view view-title="Tabs">
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Feed Tab -->
<!-- <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.tabs.feed">-->
<ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tabs.event-detail', {
url: '/feed/:eventId',
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
...
$urlRouterProvider.otherwise('/tab');
});
controllers.js
.controller('FeedCtrl', ['$scope', 'getLocalStorage', '$ionicModal', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $ionicModal, $ionicSideMenuDelegate) {
$scope.info = {};
$scope.events = getLocalStorage.getEvents();
$scope.clearSelected = function() {
$scope.events = $scope.events.filter(function(item) {
return !item.selected;
});
getLocalStorage.updateEvents($scope.events);
};
$scope.addEvent = function() {
$scope.events.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateEvents($scope.events);
$scope.info = {};
};
$ionicModal.fromTemplateUrl('new-event.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.name;
$scope.event = getLocalStorage.getEvent(eventId);
})

Your name of parameter in the URL doesn't match the requested parameter in the controller and the link in tab-feed.html.
app.js
.state('tabs.event-detail', {
url: '/feed/:eventId', // <-- The parameter is defined as eventId
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
controller.js
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.eventId; // <-- here you request the parameter
$scope.event = getLocalStorage.getEvent(eventId);
})
And last you also need to correct the href-attribute in
tab-feed.html
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.eventId}}">
Of course, you also can use the name as parameter, but you have to be consistent.

Ionic: How to Open a view on click?

I have created following main screen. On clicking each link it has to open corresponding view.
So far I have written:
index.html
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Checkout</h1>
</ion-header-bar>
<ion-content>
<div class="row blue-bg">
<div class="col col-50 white">
<ul class="list-inline">
<li>Catalog</li>
<li>Inventory</li>
<li>Dashboard</li>
<li>Transaction</li>
</ul>
</div>
<div class="col col-40 white">Logo</div>
<div class="col col-10 .col-offset-25 white">Right</div>
</div>
</ion-content>
</ion-pane>
</body>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('PaymentListCtrl', function ($scope) {
$scope.productItems = [
{
name: 'Product 1',
price: '$50.00'
},
{
name: 'Product 2',
price: '$45.00'
}
]
})
Please note I am new in both Ionic and Angular. If you can provide a simple to use method then would be greatful

try to define state and redirect your view
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Checkout</h1>
</ion-header-bar>
<ion-content>
<div class="row blue-bg">
<div class="col col-50 white">
<ul class="list-inline">
<li>Catalog</li>
<li>Inventory</li>
<li>Dashboard</li>
<li>Transaction</li>
</ul>
</div>
<div class="col col-40 white">Logo</div>
<div class="col col-10 .col-offset-25 white">Right</div>
</div>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
Define your view in another page
view1.html
<ion-view view-title="Admin">
<ion-content class="padding text-center">
//define your content here
</ion-content>
</ion-view>
in app.js define state like this
.state('main', {
url: '/index',
abstract: true,
templateUrl: '{{yourpath}}/index.html'
})
.state('main.view', {
url: '/view',
templateUrl: '{{yourpath}}/admin.html',
})
may be this can help you

I just made a simple and clear demo.
Index.html:
<body ng-controller="MainCtrl">
<!-- Make a fancy menu here -->
Welcome
Exit
<!-- The templates will be inserted here -->
<ng-view></ng-view>
</body
App.js:
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'welcome.tmpl.html',
controller: 'welcomeCtrl'
}).
when('/goodbye', {
templateUrl: 'goodbye.tmpl.html',
controller: 'goodbyeCtrl'
});
}]);
app.controller('MainCtrl', function($scope) {
//Code goes here
});
app.controller('welcomeCtrl', function($scope) {
$scope.welcome = "Welcome to the 'Welcome' page";
});
app.controller('goodbyeCtrl', function($scope) {
$scope.goodbye = "Goodbye? I guess?";
});
And ofcourse we need the template to insert and those are just 2 simple .html files which not containt <html>, <head> and <body>.
Hope you got enough information, if not jus let me know.

You can get some help from this JSFiddle
Actually copied from this JSFiddle
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope, $ionicModal) {
////.....
$scope.triggerViewUpdate = function() {
// JSFiddle didn't seem to like ng-template script tags...
$ionicModal.fromTemplate('<ion-modal-view>...Content...</ion-modal-view>').show();
};
})
HTML:
<button class="button button-positive button-block button-outline" ng-click="triggerViewUpdate()">Trigger View update</button>

TypeError: Cannot read property 'controller' of undefined

The first time I navigate to a nested route, I get this exception, "TypeError: Cannot read property 'controller' of undefined"
It causes my app to not work correctly. However, if I navigate around it starts working perfectly.
The below image shows the values of the variables and the line of code that throws has an undefined controller that causes the problems. This code is part of the Ionic Framework.
Click image to see full size
This is my only JavaScript file that defines the only module.
angular.module("sa", ["ionic"])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function () {
// hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
window.StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("login", {
url: "/login",
templateUrl: "app/manager/login.html"
})
.state("manager", {
abstract: true,
url: "/manager",
templateUrl: "app/manager/menu.html"
})
.state("manager.jobs", {
url: "/jobs",
views: {
"managerContent": {
templateUrl: "app/manager/requested-jobs.html"
}
}
})
.state("manager.detail", {
url: "/detail",
views: {
"managerContent": {
templateUrl: "app/manager/requested-job-detail.html"
}
}
});
$urlRouterProvider.otherwise("/login");
});
This is the login.html that loads correctly. It also allows the button to be clicked and navigate.
<ion-view view-title="Login" >
<ion-nav-bar class="bar-light"></ion-nav-bar>
<ion-content class="has-header" >
<ion-list>
<ion-item href="#/manager/jobs">
Manager
</ion-item>
</ion-list>
</ion-content>
</ion-view>
This is the side menu file.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-light">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-view name="managerContent"></ion-nav-view>
</ion-nav-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<span class="title">Cluber</span>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item-icon-right" menu-close ui-sref="login">
<i class="icon ion-ios-arrow-right icon-accessory"></i>Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
This is the file that gets loaded into the menu content when naviaged to.
<ion-view view-title="Dashboard">
<ion-content has-bouncing has-header="true">
<ion-list>
<ion-item class="item-border item-icon-right" ui-sref="manager.detail">
Clean Apartment
<i class="icon ion-ios-arrow-right icon-accessory"></i>
</ion-item>
<ion-item class="item-border item-icon-right" ui-sref="manager.detail">
Repair Side Walk
<i class="icon ion-ios-arrow-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
This is the simplest example I have that always reproduces the JavaScript exception. Again, this only happens the first time the that "manager.jobs" is navigated to.

The problem is with the below line of HTML in the menu.html file. I had this nested inside the <ion-nav-bar>, instead it is required to be a direct descendent of <ion-side-menu-content>.
<ion-nav-view name="managerContent"></ion-nav-view>

self.isInitialized is actually false, which will set enteringHeaderBar to null (two lines above your highlighted one).
You're setting self.isInitialized to true at the end of the function. That's the reason why it fails the first time, but then works (in the next update it is true and enteringHeaderBar will be set to getOffscreenHeaderBar().