I implemented a controller to store the title of an item and a page link associated with the item.
myApp.controller('takeAwayListCtrl', function($scope)
{
$scope.items = [{itemName: 'Pizze', page: 'pizze_takeaway.html'}, {itemName: 'Pasta', page: 'pasta_takeaway.html'}, {itemName: 'Dessert', page: 'dessert_takeaway.html'}];
});
While the x.itemName is intrepreted correctly, the following code fails to interpret the page attribute x.page correctly when I pass it to the pushPage function for the navigator.
<script type="text/ons-template" id="takeaway.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Take Away</div>
</ons-toolbar>
<ons-list ng-controller="takeAwayListCtrl">
<ons-list-item modifier="tappable" ng-repeat="x in items">
<ons-button ng-click="myNavigator.pushPage( {{x.page}}, { animation : 'slide' } )" modifier="large--quiet">
{{ x.itemName }}
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</script>
Do I need to escape something ?
I don't think you need to wrap the x.page with an {{ }}.
Just use it directly like this:
<ons-button ng-click="myNavigator.pushPage(x.page, { animation : 'slide' } )"
Related
I'm new in Onsen UI. How should I use the 'go-back'-method to go back to the main page? (Like the left back button.) I've tried to do this with pushPage-Method. It works, but the animation is different.
HTML of the Template with the back / save-Button
<ons-navigator var="profileNavigator">
<ons-list ng-repeat="item in profileData">
<ons-list-item modifier="chevron" class="profile-list-item-container" ng-click="openAboutMeDesc(item.aboutMe)">
<div class="profile-list-item-left">
<i class="fa fa-child fa-profile-list"></i>
</div>
<div class="profile-list-item-right">
<div class="profile-list-item-content">
<div class="profile-category">Über mich
</div>
<span class="profile-desc">{{item.aboutMe}}</span>
</div>
</div>
</ons-list-item>
<ons-template id="profile-aboutme-desc.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="right">
<ons-toolbar-button ng-click="saveAboutMeDesc(item.naboutMe)">Save</ons-toolbar-button></div>
<div class="center">About</div>
</ons-toolbar>
<ons-row>
<!--my content-->
</ons-row>
</ons-page>
</ons-template>
</ons-navigator>
JavaScript
$scope.openAboutMeDesc = function (aboutMe) {
profileNavigator.pushPage('profile-aboutme-desc.html', { animation : 'slide' } );
};
$scope.saveAboutMeDesc = function (naboutMe) {
};
The animation is different (forward instead of backward) because, using profileNavigator.pushPage method, you are adding a new page to the stack instead of going back to an old one. If you need to go to the main page, consider using profileNavigator.resetToPage method.
$scope.openAboutMeDesc = function (aboutMe) {
profileNavigator.resetToPage('profile-aboutme-desc.html', { animation : 'slide' } );
};
Remember that you can select the transaction animation between "slide", "simpleslide", "lift", "fade" and "none".
Take a look at the official documentation if there is something not clear:
https://onsen.io/reference/ons-navigator.html
Hope it helps!
Not sure this is an issue with onsen-ui or me being a newbie with angularjs...
I've got a menu with 2 different popover. I wanted to use the same controler since they are similar. The only difference is the button that call it and the page used for the popover menu. So I have something like this
app.controller('PopoverController', function($scope) {
$scope.popurl = function(url) {
$scope.param = url;
};
ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) {
$scope.popover = popover;
});
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
});
And it gets called this way
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popover.show($event); popurl('popover_share.html')">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popover.show($event); popurl('popover.html')">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
This is not working. if I change ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) by
ons.createPopover('whatever.html',{parentScope: $scope}).then(function(popover) {
Then it works but obviously display whatever.html all the time
So I guess my first question is why is it working when I hardcode the URL and doesn't when I use a variable ?
The second question is : Is there a simpler way to pass my argument to my controler ?
Thank you for your help !
There are two mistakes in your code:
you are trying to show the popover before it has been created.
when you click the toolbar-button you are calling two functions in sequence, without considering that maybe the second function will finish its execution before the first one. This will give an inconsistent result (the popover will be displayed before the new URL will be initialized).
You can solve your issues by creating the popover inside $scope.popurl(), after the URL has been initialized. You can also show the popover after it has been created. Don't forget to destroy the popover after you close it, as any button click will create a new instance of the popover.
HERE you can find a working CodePen example and here is the code:
HTML
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popurl('popover_share.html', $event)">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popurl('popover.html', $event)">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<ons-template id="popover_share.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is "popover_share" popover!</p>
</div>
</ons-popover>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is "popover" popover!</p>
</div>
</ons-popover>
</ons-template>
JS
ons.bootstrap()
.controller('PopoverController', function($scope) {
$scope.popurl = function(url, e) {
$scope.param = url;
ons.createPopover($scope.param, {
parentScope: $scope
}).then(function(popover) {
$scope.popover = popover;
$scope.show(e);
});
};
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
});
Hope it helps!
this is my js code :
var application = angular.module('app', ['onsen']);
application.controller('ItemController',function($scope){
$scope.local = [];
$scope.loadPresentation = function(id){};
}
and this is my ons-list :
<ons-list id ="list" style="margin:0px;padding:0px;" ng-controller="ItemController">
<ons-list-item modifier="chevron" ng-repeat="item in local">
<ons-carousel style="height: 100%;width :100%;position: absolute;left: 0;top: 0;" swipeable initial-index="1" auto-scroll>
<ons-carousel-item class="list-action-menu">
<ons-button modifier = "quiet" ng-click="menu.setMainPage('default.html', {closeMenu: true, callback: function(){loadPresentation(0);}});">
{{item.name}}
</ons-button>
</ons-carousel-item>
<ons-carousel-item class="list-action-menu">
<ons-button ng-click="local.splice($index, 1);runtime.local=local">
Remove
<ons-icon icon="ion-trash-a">
</ons-button>
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
</ons-list>
The second button works fine but the first ng-click in the first carousel item is not firing but it works with the function outside the scope when i use onclick.
ng-click expects Angular expressions, what means function declarations are not allowed. Just create the callback in your controller and link it from your view:
$scope.myCallback = function(){
$scope.loadPresentation(0);
};
ng-click="menu.setMainPage('newpage.html', {closeMenu: true, callback: myCallback});".
Hope it helps.
Edit: callback with parameters
$scope.customSetMainPage = function(params) {
$scope.menu.setMainPage('newpage.html', {
callback: function() {
console.log(params);
}
});
};
Is there a way to set parameters for the next page when calling SetMainPage() on sliding menu ?
Something similar to :
myNavigator.pushPage("page2.html", { param1: "value1", param2: "value2" });
but using
myMenu.setMainPage(...);
UPDATE:
I think there is a way to achieve what you want like this:
<body ng-controller="ctrl">
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" ng-click="setParam('option1');">
page1
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="setParam('option2');">
page2
</ons-list-item>
</ons-list>
</ons-template>
</body>
And in javascript:
var module = angular.module('app', ['onsen']);
var params = {msg:""};//define a global object
module.controller('ctrl', function($scope){
$scope.setParam = function (msg) {
params.msg = msg;//set the options you want in the object
menu.setMainPage('page1.html', {closeMenu: true});//change the page
}
});
module.controller("page1ctrl" function($scope){
var options = params.msg; // this will give you the options you set earlier
});
The documentation is misleading in this regard. It actually only accepts the closeMenu and callback parameters, not 'custom' as the example indicates. The use of param1 as a parameter example is misleading.
I am trying to create master-detail app but I can't access the controller $scope variable in my template. This is what my html looks like:
<body >
<ons-tabbar var='Apptabbar'>
<ons-tabbar-item icon="users" label="People" active="true" page="people.html"></ons-tabbar-item>
<ons-tabbar-item icon="clock-o" label="Schedule"page="schedule.html"></ons-tabbar-item>
<ons-tabbar-item icon="map-marker" label="Map" page="map.html"></ons-tabbar-item>
</ons-tabbar>
<script type="text/ons-template" id="people.html">
<ons-navigator>
<ons-page ng-controller="PeopleController">
<ons-toolbar modifier="bgred">
<div class="center">People</div>
</ons-toolbar>
<ons-list>
<ons-list-item modifier="chevron" ng-repeat="person in persons" ng-click="showDetail($index)">
{{ person.first_name }} {{ person.last_name }}
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</script>
<script type="text/ons-template" id="person.html">
<ons-page ng-controller="PersonController">
<ons-toolbar modifier="bgred">
<div class="left">
<ons-back-button style="color: #FFF;">People</ons-back-button>
</div>
<div class="center">{{person.first_name}}</div>
</ons-toolbar>
<ons-list>
<ons-list-item>{{person.first_name}}</ons-list-item>
</ons-list>
</ons-page>
</script>
</body>
and my js file looks like this
(function(){
'use strict';
var app = angular.module('tedxph', ['onsen.directives']);
//Person Controller
app.controller('PersonController', function ($scope, $data) {
$scope.person = $data.selectedItem;
console.log($scope.person)
})
//People Controller
app.controller('PeopleController', function ($scope, $data) {
$scope.persons = $data.items;
$scope.showDetail = function (index) {
var selectedItem = $data.items[index];
$data.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('person.html', {title : selectedItem.first_name});
}
})
app.factory('$data', function() {
var data = {};
data.items = [
{first_name: "Steve", last_name: "Jobs"},
{first_name: "Larry", last_name: "Page"},
{first_name: "Bill", last_name: "Gates"},
{first_name: "Micheal", last_name: "Dell"}
];
return data;
});
})();
The person.html page doesnt render the variable value instead it shows "{{person.first_name}}" rather than the value. Am I doing something wrong?
Try wrapping your JSON keys in double quotes. There may be some hiccups on the underscores.