With OnsenUI 1.0.4 I used this command ons.navigator.getCurrentPage().options.onLeftButtonClick to get the click event(string) for the left button from navigation bar.
In OnsenUI 1.1.x I changed my project to use the ons-toolbar.
How do I get the left button now?
Thank you
One solution is using ng-click or onclick attribute to button tag s.t.
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="myNavigator.popPage()">Btn</ons-toolbar-button</div>
....
Another solution is using addEventListener as usual javascript s.t.
<div ng-controller="TbCtrl">
<ons-page>
<ons-toolbar>
<div class="left"><ons-toolbar-button class="btn2">Btn2</ons-toolbar-button></div>
....
and
app.controller("TbCtrl",function($scope){
var elem = document.querySelector(".btn2");
elem.addEventListener("click",function(){
alert("OK"); // Your Code Here
} ,false);
});
Related
I am building a cross platform application using Angular Kendo Mobile.
I have a Kendo list using "kendo-list-view".
<div kendo-list-view >
I want to get an event when user scrolls this list, in my controller.
I also tried to get the scroll event by using pure angular code, as mentioned in below question.
Bind class toggle to window scroll event
But in my case nothing happens and code inside the directive is not getting called.
UPDATE
I have my HTML with list view as below:
<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">
<kendo-mobile-header >
<kendo-mobile-nav-bar style="background-color: gray">
<kendo-view-title style="color: white"></kendo-view-title>
<kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div class="myListMainDiv">
<div kendo-list-view
id="myListViewDiv"
class="myListViewDiv"
k-template="templates.myListViewItem"
k-data-source="myService.listDataSource"
ng-show="showListSelected"
></div>
</div>
<script id="myListViewItem" type="text/x-kendo-template">
<div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
{{dataItem.name}}
</div>
</script>
</kendo-mobile-view>
I am loading this page in my root page when user selects to navigate to this page using kendo.mobile.application.navigate("MyList.html");. And when controller for this page loads I have created list using new kendo.data.DataSource and I have attached new kendo.data.ObservableArray to my data source.
You can get the scroll event from the Scroller of your Kendo Mobile View,
For example if you have a view with id="myListScreen":
var kendoView = $('#myListScreen').data().kendoMobileView;
var scroller = kendoView.scroller;
scroller.bind("scroll", function(e) {
console.log(e.scrollTop);
console.log(e.scrollLeft);
});
You can find more info about the kendo scroller here on their documentation
I'm trying to insert an html tag with ng-click event in the kendo editor. When I get the inserted data and show in a div, ng-click is not working. The normal onclick in javascript is working fine, but ng-click is not.
The below given is the <a> tag inserted on the editor text area.
<a ng-click="testMsg()"><span>' + nodeId + '</span></a>
Any idea on how to resolve this ?
onclick is DOM native event handler but ng-click isn't. Only those functions that are registered in the scope will be available. Any built-in functions will NOT be available to ng-click without an explicit assignment to the scope as my example shows.
var app = angular.module('app1', []);
app.controller('ctrl1', ['$scope', function($scope) {
function testMsg() {
alert('Hello world');
}
$scope.goodTestMsg = testMsg;
}]);
<div ng-app="app1" ng-controller="ctrl1">
<p ng-click="goodTestMsg()">Click me will show a message</p>
<p ng-click="testMsg()">Click me should happen nothing</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
TL;DR: The method testMsg is not exposed to the controller scope. Try adding something like $scope.testMsg = testMsg; will solve your problem.
Instead of textarea, try using div. I am facing similar problem which was partially solved with div. However it will be inline editing as the toolbar will get hidden and it will be displayed only when you focus cursor on the div.
I'm using onsen ui and angular for the first time.
Basically I'm looking to navigate from the index to another page with a full screen carousel, with a specific carousel-item showing.
I started out with this code which is more or less the onsen ui sample carousel code modified to use ng-repeat and to set an initial index.
html
<ons-navigator title="Navigator" var="myNavigator">
<ons-page ng-controller="MyController">
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item ng-repeat="i in ['gray', '#085078', '#373B44', '#D38312']" style="background-color: {{i}};">
<div class="item-label">{{i}}</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">Swipe left or right</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
app.js
var app = ons.bootstrap();
app.controller("MyController", function($scope) {
ons.ready(function() {
carousel.setActiveCarouselItemIndex(2);
});
});
And that seemed to work fine when the carousel was the main page.
setting initial-index didn't seem to work with ng-repeat.
html
<ons-carousel swipeable overscrollable auto-scroll fullscreen initial-index="2" var="carousel">
Then, when I tried navigating to the page with the carousel, it said that carousel was undefined.
I also tried adding an event listener on the carousel, since it didn't seem to be loaded at that point.
document.addEventListener('ons-carousel:init', function() {
carousel.setActiveCarouselItemIndex(2);
});
The event listener triggered, but the setActiveCarouselItemIndex didn't seem to do anything.
This same code works when I do not use ng-repeat and have a bunch of ons-carousel-items in the html.
What I started out with: http://codepen.io/anon/pen/aObNqW
A simple example of where I am stuck: http://codepen.io/anon/pen/yNLOvY
If there is a better way to do this, I'd love to know!
Your code is fine, the problem is that you are trying to switch the carousel page when onsen is ready, which is before the carousel element is created. You can add a timeout function to make it work, or just call the script after the carousel has been loaded. If you choose the first option, just modify you controller in this way:
var app = ons.bootstrap();
app.controller("MyController", function($scope) {
ons.ready(function() {
setImmediate(function(){
carousel.setActiveCarouselItemIndex(2);
});
});
});
HERE you can find a working CodePen example
Firstly I'm using angular 1.2.14,
In this case ng-click of ngTouch is used:
<section class="scroller-container">
<div id="wrapper">
<ul id= "scroller">
<li data-ng-repeat="competitor in competitors">
<div class="competitor-title" data-ng-click="selectCompetitor(competitor)">
<div class="title-name">
<span>{{competitor.competitorTitle}}</span>
<br>
<span>{{competitor.competitorName}}</span>
</div>
<div class="landmark"></div>
<div class="landmark-emphasis">
<i class="icon-arrow-down-blue"></i>
</div>
</div>
</li>
</ul>
Then the controller:
app.controller('intelligenceController', ['$scope', '$http', function($scope, $http){...}]);
In which:
$scope.selectCompetitor = function(competitor) {...};
And I used ng-click-active, the document says:"This directive also sets the CSS class ng-click-active while the element is being held down (by a mouse click or touch) so you can restyle the depressed element if you wish."
So I click or touch the div, style changes. However touch doesn't trigger the method, while mouse click trigger the method.
In short, mouse click works right, while touch only change the style, why?
Edit(old): The problem is solved, using android webview it works all right. I tested my webapp on surface pro, the touch does not work ok.
Edit The root cause is you need to set iscoll option (click: true), otherwise in UIWebview and surface pro it will not work ok.
did you add ngtouch in your module ?
var sellApp = angular.module('process', ['ngTouch']);
and also include it
<script src="js/angular-touch.min.js" type="text/javascript"></script>
I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it.
I know how to do with jquery as below, but the need is to do it in angular.
HTML:
<body>
<div>
Click me
</div>
<div id="content">
<div id="list">
</div>
</div>
</body>
CSS:
#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
.slidein{right:0;}
JS:
$("#clickhere").click( function(){
if($("#list").css("right")== "0px")
{
$("#list").animate({right:"-200px"}) }
else{
$("#list").animate({right:"0"})
}
})
jsfiddle - http://jsfiddle.net/RJJwu/3/
Can anyone please help me with the angular code. I looked over a couple of examples such as :
1) Different transitions with AngularJS
2) http://mgcrea.github.io/angular-motion/ - in section Slide, 2nd button
The above links represent my actual need. I tried doing it via 1st link, but its not working.
Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).