I have a directive which contains an iScroll element, which is built with li from an ng-repeat:
<div class="my-film">
<div class="filmstrip-container">
<div class="scroll-wrapper">
<ul class="film-container">
<li ng-repeat="film in films"
ng-mouseover="onMouseOverItem($event)"
ng-mouseleave="onMouseLeaveItem($event)"
ng-click="openFilm()"
class='film-slide'>
...nested videos etc in here.
</li>
</ul>
</div>
</div>
</div>
In the directive's link function I have the onClick function like this
scope.openFilm = function() {
...code to open the film and play
}
This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.
I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?
We're using Angular 1.3, and have ngTouch added.
Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link
The problem here was the iScroll blocking my touch events. Passing {click: true} in as the options when initiating the iScroll fixed the problem.
iOS creates separate events for ng-mouseover, ng-click, ng-mouseleave, etc.
That means that your first tap will trigger ng-mouseover, your second tap will trigger ng-click, and your tap outside the element will trigger ng-mouseleave.
Saddly, I thought ngTouch would fix this issue created by iOS but it didn't. It fixed it only if you use css hover, but not if you use java script mouse events (including those of angular).
Related
I'm new to Angular JS and i'm trying to create a small web app for learning.. I am trying to make a Tooltip text on mouseover but i'm not sure how to get it done the "Angular way"..
I created 2 spans, when hovering the first, i want to show the second
I tried using ng-mouseover and ng-mouseleave to call the actions-
<span class="info" ng-mouseover="info_in();" ng-mouseleave="info_out();">
<img src="images/info.png" />
</span>
<span class="info_bubble" ng-show="info">The Tooltip Text</span>
And that's where i got with the JS-
$scope.info_in = function() {
this.parent().find('.info_bubble') = true;
};
$scope.info_out = function() {
this.parent().find('.info_bubble') = false;
};
There are going to be more than 1 Tooltip text on each page and i'm not sure how to get it done.. I tried with "next()" and "closest()" but couldn't get it to work
When i try to mouseover the element, i get "this is not a function"
You've got the right idea but your implementation is moving toward the jQuery way, not the Angular way. :)
Try this:
<span class="info" ng-mouseover="info=true" ng-mouseleave="info=false">
<img src="images/info.png" />
</span>
<span class="info_bubble" ng-show="info">The Tooltip Text</span>
No controller code is necessary for this to work.
What you're doing is that when the mouse enters the image, Angular will set $scope.info to true. And since your tooltip is watching that scope variable, it will trigger the ng-show directive to fire which will show your tooltip.
The ng-show directive can be translated as: When $scope.info == true, then show() this element. When $scope.info == false, then hide() this element.
In fact, you could be more verbose (which is good for learning) writing your tooltip element like this:
<span class="info_bubble" ng-show="info==true">The Tooltip Text</span>
I notice that you're using the jQuery method of specifically trying to find an element in the DOM in order to work with it.
The Angular way is to change variables on the $scope. Other HTML elements will monitor variables on the $scope and will automatically change themselves depending on what the new value is. The jQuery way is to reach out and specifically touch and set a value on a DOM element. The Angular way is akin to shouting to the wind, "Hey, my name is $scope.info and I'm now true!" and expecting that some other element will hear it and go, "Ok cool, now I can show myself because $scope.info is true."
That's the main difference between the way jQuery and Angular work.
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 would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
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'm using snap.js with AngularJS using the angular-snap.js directive.
https://github.com/jtrussell/angular-snap.js
I'm also using Andy Joslin's angular-mobile-nav.
I'm wondering where I should store the code for the menu:
<snap-drawer>
<p>I'm a drawer! Where do I go in the angular code?</p>
</snap-drawer>
Because this isn't a unique page within the angular-mobile-nav, I'm currently putting the on every page and just using a directive that contains all my menu code/html.
Seems like this could be inefficient as it is loading a new directive on each page, right? Any idea on how to do this better?
Thanks!
So this is what I've done (I also use angular-mobile-nav and angular-snap.js).
This is my HTML Code
<body ng-app="MyApp">
<div snap-drawer>
<ul class="list">
<li ng-repeat="item in sidebar.items" ng-i18next="{{item.name}}" ng-tap="snapper.close();go(item.link)"></li>
</ul>
</div>
<div id="container" snap-content snap-options="snapOpts">
<div mobile-view=""></div>
</div>
</body>
please note that go() is the function to change the page and that I'm using ng-i18next to translate my items. Also ng-tap is a directive which listens for touch events instead of mouse events. With Angular >1.1.5 there's a mobile module, so my ng-tap directive won't be needed anymore.
And by using $rootScope I can put items in the sidebar:
$rootScope.sidebar = {
items: [
{
name: 'item_one',
link: 'page_one'
},
...
]
};
So if you want to change the items in the sidebar, simply override $rootScope.sidebar (not $scope.sidebar) in your controller ;)
If you don't like two animations happen at the same time, you could write a function, which waits for the sidebar to close and then change the page. It could look like this:
$rootScope.waitThenGoTo = function (page, time) {
time = time || 200;
$timeout(function () {
$navigate.go(page);
}, time);
};
If you have still question, please comment. I'll try to update this answer as soon as possible.