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
Related
I am trying to use a collapse model in angular UI
<div class="" ng-click="isCollapsed =!isCollapsed" ></div>
and in my controller i set the value
$scope.isCollapsed = true;
but my initial pageload shows the div as collapsed. I want to hide it initially .Could someone help me with this
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);
});
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).
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario