@munsterlander , @Yudhi-Darmawan
Thanks for the response.
Actually in all my projects I load Onsen and the rest of .js files at the end with no issues at all.
The issues appeared after updating Onsen to latest versions but I managed to fix it without moving the declaration of the js files, but by changing how I organized Onsen components in my html files ( split and separate them in files).
The errors were appearing only when I was using the tabbar component.
Lexin is well known tranlating service in Sweden!
LexiconMe is an app for iOS and Android built with Onsen, which uses this service. This app is suitable for people who live in Sweden because of their work or university etc. but they are not from there.
LexiconMe will be extended (currently in development) to an advanced language assistant service that will include tests using efficient learning methods such as Leitner System (flashcards).
If someone believes that this app can help him then download it and share your feedback
Android: https://play.google.com/store/apps/details?id=gr.lexicon.team&hl=en
iOS : https://itunes.apple.com/gr/app/lexiconme/id1171904585?mt=8
Hello,
I worked with a team a few months ago and we built an application for tv series called tvSeeker! try it out if you like and share your feedback.
Find information and add shows to your collection and tvSeeker will send notifications prior to airdate of each show. Apart from the basics tvSeeker applies simple maths to recommend (offline) shows based on your tastes. Now we are in the process of building a more advanced online recommendation service.
Google play link: https://play.google.com/store/apps/details?id=shows.uniteam.gr&hl=en
1 error :
Uncaught (in promise) TypeError: Cannot read property ‘_compileAndLink’ of undefined at Object.window.ons.TabbarElement.rewritables.link
2 error :
Uncaught (in promise) TypeError: Cannot read property ‘_link’ of undefined
Starting page is defined like this:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"><!-- default-src 'self' gap://ready -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/font_awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/ionicons/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="css/material-design-iconic-font/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="css/onsenui.css"/>
<link rel="stylesheet" href="css/onsen-css-components-dark-theme.css">
<link rel="stylesheet" href="css/app.css"/>
<title>Title</title>
</head>
<body>
<ons-page>
<!--<ons-toolbar>{{}}</ons-toolbar>-->
<ons-tabbar position="auto" animation="slide">
<ons-tab page="templates/live.html" icon="ion-university, material:md-graduation-cap" label="Page1" active></ons-tab>
<ons-tab page="templates/program.html" icon="ion-ios-calendar, material:md-calendar" label="Page2"></ons-tab>
<ons-tab page="templates/social.html" icon="ion-share, material:md-share" label="Page3"></ons-tab>
</ons-tabbar>
</ons-page>
<script type="text/javascript" src="js/onsenui.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-onsenui.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/appServices.js"></script>
</body>
</html>
each page (tab-item) is in a different html file.
Why Onsen throws these errors?
Thanks in advance
Hello,
I am trying to create a calendar for my application. I have found this directive :
https://github.com/twinssbc/AngularJS-ResponsiveCalendar
which works really well and they have created a version of the same directive for Ionic framework:
https://github.com/twinssbc/Ionic-Calendar
I managed to convert the latter to work with OnsenUI. The thing is that the directive keeps only 3 carousel items and as you swipe left or right it computes the adjacent months/days/weeks and refreshes.
In Ionic you can add a property to tell to the carousel to always loop (like infinite carousel). That way there are only 3 carousel items but you can loop continuously around them. How can the same behavior be achieved in Onsen?
here is the CodePen link of the directive working with OnsenUI: https://codepen.io/jc86/pen/dpZBXV
@Fran-Diox Ok… I see, I did not set the target at all!
thanks again
@Fran-Diox, Apart from the $scope issue, it seems when using the popover from template I am getting Error: Invalid target exception.
I changed the popover code in the tutorial to match the one of the dialogs (but using popover instead) to see if the popover will show in browser (in case something is wrong in my setup) but it throws the same error again. Check this codePen to see the error yourself.
Thanks in advance
@Fran-Diox Thanks for your response. I’ ve seen the tutorial, but my problem is that I don’t use $scope in my controller and passing the variable that holds the controller (i.e var vm = this;) like this : ons.createPopover('languagesPop.html',{ parentScope: vm }) is not working.
I have this page:
<div ng-controller="pageController as ctrl">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.left.open()" modifier="material"><ons-icon icon="md-menu" size="24px"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Title</div>
<div class="right">
<ons-toolbar-button modifier="material" ng-click="popover.show($event)"><ons-icon icon="md-more-vert" size="24px"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item ons-lazy-repeat="ctrl.delegate">
<div class="center">
{{ item}}
</div>
</ons-list-item>
</ons-list>
</ons-page>
<ons-popover cancelable cover-target direction="down" var="popover">
<ons-list>
<ons-list-item ng-repeat="lang in ctrl.langs">
{{lang}}
</ons-list-item>
</ons-list>
</ons-popover>
</div>
The obvious reason I wrap the page and popover element inside a div is to share the same controller. It’s working but It doesn’t feel right.
In the above example, I am using controllerAs syntax and saving the controller (this) to a variable (i.e var vm = this;).
How can the popover access the page’s controller variables and functions using this syntax? (In dialogs, I can pass the $scope variable as option to have the desired behavior). No matter what I’ve tried, I couldn’t get to a nice solution.
Thanks in advance.
@Fran-Diox ok thanks! Will check it out.