I am trying to use ng-mousedown and ng-mouseup in concert, however ng-mousedown is firing twice and ng-mouseup is not firing at all. For example, the following code causes count to increment by two instead of going up on press and down on release:
<!DOCTYPE html>
<html>
<body ng-app>
<div>
<div style="background-color: blue; width: 80px;" ng-mousedown="count = count + 1" ng-mouseup="count = count - 1" ng-init="count=0">Click Me</div>
<div>{{count}}</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
If I change the Angular version to 1.1.1 it works as expected. Am I doing something wrong or is this a bug in Angular? I've tested in Chrome and Firefox. It works in Firefox, but not Chrome.
Update: After further testing it appears that this may only fail to work in Chrome on Linux 64. So it might be a bug in Chrome.
I loaded the test file into Chrome directly and found it worked as expect. When I compared it to the one loaded via my local webserver, I found the following line injected into my HTML:
<div id="__ngBatarangElement" style="display: none;">{"id":1,"time":18.12599998083897,"event":"scope:apply"}</div>
That made me suspect the AngularJS tab in dev tools. Sure enough, disabling it "fixed" the page:
What is more disconcerting is the fact that I distinctly remember choosing not to install Batarang due to the nearly universal negative reviews. I guess I will have to add mine to the pile.
Update: Found that the issue has been reported https://github.com/angular/angularjs-batarang/issues/205
Related
This sounds wacky but we're currently consistently able to reproduce this issue, and I wanted to know if anyone has seen anything like it, or knows what could be causing it.
We have an Angular 1.4.1 application, and in some of our html partials we have conditions in the following form:
<div ng-if="!obj.myvar">
... contents ...
</div>
Where in your JS you've set up your scope accordingly:
$scope.obj = { myvar: false }
This works as expected in all browsers, except iOS Safari (we've seen this on iPhone and iPad):
On the initial load, all elements following the ng-if fail to load
If you manually refresh the page, it will then work as expected
We've found that changing the syntax to this fixes the issue:
<div ng-if="obj.myvar === false">
... contents ...
</div>
But I'm not hugely satisfied with that as a solution, and it doesn't explain why this issue is happening at all.
Word of warning if you're trying to replicate this - this isn't reproducible on jsFiddle. I assume that's because the results window isn't a "true" browser.
The expression {{heading + message}} in my html should render, as per my code, as Message: .
It does render the values of the variables heading and message when I input the values and click the button.
So the intended functionality is working.
But the question is about the initial load where the expression should
render as Message: in place of the expression itself as in
{{heading + message}}.
I am accessing the page via http://localhost:8080/examples/first.html, and I have tried on safari and chrome.
Nature of the problem:
The expression renders as is: {{heading + message}} for few seconds on the first load (unless I refresh the page).
It is eventually rendered but my question is why would it take a bit to render the title Message: in my .js file.
I am not certain, it couldn't be the processor because I am running it on Node.js / Express server on osx with 2.4 GHz Intel Core i5
The HTML:
<!DOCTYPE html>
<html ng-app="firstApp">
<head>
<title>First AngularJS App</title>
</head>
<body>
<div ng-controller="FirstController">
<span>Name:</span>
<input type="text" ng-model="first" />
<input type="text" ng-model="last" />
<button ng-click="updateMessage()">Message</button>
<hr>
{{heading + message}}
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="js/first.js"></script>
</body>
</html>
The .js:
var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function ($scope) {
$scope.first = '';
$scope.last = '';
$scope.heading = 'Message: ';
$scope.updateMessage = function () {
$scope.message = 'Hello ' + $scope.first + ' ' + $scope.last + ' !';
};
});
Any pointers would be helpful. Following are the screen shots of what it looks like initially for a moment vs. after a few seconds:
vs.
EDIT: It isn't so just on the the first load. This happens on subsequent loads on new tabs as well, not as slow as the first load but it does happen.
Anything you think I should try different?
I think as per the ngCloak doc ,which will get rid of the flickering issue https://docs.angularjs.org/api/ng/directive/ngCloak
, ng-cloak works is it adds display: none !important to items using it.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
This directive can be applied to the body element, but the preferred usage is to apply multiple ngCloak
<span ng-cloak>{{heading + message}}</span>
as per the doc of ng-cloak , make sure angular.js script must be loaded in the head section of the html file for the better results,
Instead of using AngularJS directive ngCloak, use class="ng-cloak", Angular will automatically remove it once it has loaded all of the module's dependencies.
You will have to add this line to your CSS file:
.ng-cloak {
display:none;
}
Add the class to your body tag:
<body class="ng-cloak">
Here's a working plunkr: http://plnkr.co/edit/v3DnDb2dJIqMAvxkEsO2?p=preview
This is most likely attributed to the fact that your scripts are being called from a remote server instead of from your testing server's local file system (I am thinking this due to the face that you stated it hangs while only rendering 2 variables which would not cause any real delay in rendering - to the naked eye), so while the get happens your browser does not know what to do with the Angular code until the library is downloaded, parsed and executed.
I would download a copy of AngularJS along with any other dependencies that nG may be using into your projects public scripts directory and then retest. I am willing to be that this solves your latency issues. The only other obvious thing it could be is the amount of data-binding expressions this view has - although if this the code above is the only angular you have on this page, then you can rule the amount of bindings out as a problem. I think one doesn't experience real latency issues until about roughly 10,000 data bindings (basically AngularJS is known for a ton of things - rendering speed is not one of them).
Also you can avoid the "expression flicker" by using ng-bind in place of the {{ ngExpressions }}.
You may also use <div ng-show="heading && message"> {{ heading }} {{ message }}</div>
or ngCloak. These techniques are are covered in this thread: In Angular, is there a way to prevent flicker in expressions that contain concatenated values?
I followed the instruction on msdn to build the sample Apache Cordova, but when it is running, I am not getting and response from the output. The output is similar to the following image:
but there is no way to add / remove entry to the list.
I checked and found that index.html has the following lines:
<button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button>
<button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button>
but there is no way to add new items to list?
What is wrong with this sample code that makes the UI doesn't work properly?
The sample uses angular.js
Edit 1:
To find why the sample doesn't work and why I am not getting the correct result, I tried to debug the javascrip code. Based on my understanding, when the page which the code for it is as follow :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/frameworks/angular.min.js"></script>
<script src="scripts/frameworks/angular-resource.min.js"></script>
<title>AngularJSToDo</title>
<!-- AngularJSToDo references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="xPlat">
<section id="todoapp" ng-controller="ToDoCtrl">
<header id="header">
<div id="headerBand"></div>
<input id="new-todo" placeholder="What needs to be done?" ng-text-change="addToDo()" ng-model="newToDoText" autofocus>
</header>
<section id="main">
<div id="todo-list">
<div class="templateWrapper" ng-repeat="toDoItem in todos">
<div class="templateContainer">
<input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text" />
<h3 class="templateAddress">{{toDoItem.address}}</h3>
<button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button>
<button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button>
</div>
<div class="templateBorder"></div>
</div>
</div>
</section>
</section>
<script src="scripts/index.js"></script>
</body>
</html>
The function in index.js is called:
The source for index.js is as follow:
(function() {
'use strict';
angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']);
angular.module('xPlat.directives', []);
angular.module('xPlat.controllers', []);
angular.module('xPlat.services', ['ngResource']);
})();
I put a breakpoints on this line:
angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']);
and run the application, but the application did not stop on the line (apparently, the index.js is not loaded and if loaded, it is not run)
To see if the file exist in the correct place, I run the application and after it is loaded in ripple emulator, I change the url of the web browser to this:
http://localhost:4400/scripts/index.js
and I can see the index.js text on screen.
why this function is not run when I load the page?
Edit 2
After making some try and error, I found that I am getting these errors on JS console:
Failed to load resource: the server responded with a status of 404 (Not Found)
ripple.js (50,28958)
Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=ToDoCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:4400/scripts/frameworks/angular.min.js:6:417
at Sb (http://localhost:4400/scripts/frameworks/angular.min.js:19:510)
at La (http://localhost:4400/scripts/frameworks/angular.min.js:20:78)
at http://localhost:4400/scripts/frameworks/angular.min.js:75:465
at http://localhost:4400/scripts/frameworks/angular.min.js:57:178
at q (http://localhost:4400/scripts/frameworks/angular.min.js:7:428)
at M (http://localhost:4400/scripts/frameworks/angular.min.js:57:45)
at g (http://localhost:4400/scripts/frameworks/angular.min.js:51:409)
at g (http://localhost:4400/scripts/frameworks/angular.min.js:51:426)
angular.min.js (102,443)
It is appear from the first error that somefile is missing, but how can I find which file is missing?
I believe you haven't gone through all parts in that guidance.
Please keep following and you will find the functions you need in services.js mentioned in section "add the data model". The data model and related functions are defined there.
To add entries to the TODO list just click on “What needs to be done?”, start typing and press enter when done. To remove an entry just click on the entry and you will get the delete button on the left, click it and the item is gone and to mark an item as “Done” just click on the check box to the left.
I just ran the sample using Android Ripple Nexus (Galaxy) and it worked fine. The fact that you got to the initial page of the sample you attached tells me you are good to go. I also get the 404 on ripple but that doesn’t stop the sample to run (I have to investigate why of that error)
Finally if adding an entry doesn’t work for you, on Solution Explorer double click toDoCtrl.js file at www/scripts/controllers and set a breakpoint inside the ToDoCtrl.prototype.addToDo function, press F5 and try to add an entry, you should hit the breakpoint as soon as you enter a text and press enter.
I want to make a simple use of the plugin x-editable, following step by step what's to do in the official doc.
It actualy worked fine when I was on Bootstrap 2, though, it doesn't work anymore on BS3 (even if I updated everything to the latest version etc.).
So when I click on the link to trigger the editable popover, I got this error in firebug :
TypeError: this.$element.data(...) is undefined
[...]/Bootstrap3/js/bootstrap-editable.js
Line 154
Which is actually this line :
this.$element.data('popover').tip().addClass('editable-popover');
Btw, I'm using CakePHP, all the plugins (js and CSS) are declared etc...
So I'm running out of idea, if someone knows about it, would be cool !
Thanks !
EDIT : Problem solved, just had to reload the cache... Old script was still in it so there was compatibility problems.
Did you download the latest Bootstrap 3 ready version from: http://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.0.zip
I didn't find any problem following the steps from http://vitalets.github.io/x-editable/docs.html. See: http://jsfiddle.net/xaRbU/
Note the examples use jquery-2.0.3 (the fiddle above works with 1.9.1). Since jQuery 2 doesn't support IE8 Bootstrap requires the newest 1.x version of jQuery, see also: Updating Bootstrap to version 3 - what do I have to do?
Code used:
html:
<div class="container">
<div class="row">
superuser
</div>
</div>
javascript:
$(document).ready(function() {
$('#username').editable();
});
css:
/* create some space cause the popup shows on the top of the element */
body{padding-top:100px;}
Yesterday when I was using older version, everything worked fine. My code looked like this:
<div ng-repeat="widget in widgets" class="box" ng-include="widget.view"></div>
Today I updated to newer version and it seems that it doesn't work anymore. I tried different versions of how to use ng-include and this one below renders a comment where the content should be:
Comment:
<!-- ngInclude: widget.view -->
Code:
<div ng-repeat="widget in widgets" class="box">
<ng-include src="widget.view"></ng-include>
</div>
I've also tried moving views out of partials into script tags but it doesn't help. Before I moved to script tag there was SUCCESSFUL xhr request to partial, but it just didn't render it.
What could be wrong?
Edit: if I change version back without any code modification, everything works again.
Possibly it's this issue https://github.com/angular/angular.js/issues/3627 foo bar foo bar