Here is the link to the code:
http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview
Open up your javascript console and click on "say hi". It will trigger an error that $apply is already in progress.
But when you remove this piece of code:
ng-controller="mouseEvents" ng-mousedown="onMouseDown()" ng-mouseup="onMouseUp()" ng-mousemove="onMouseMove()"
and after saving when you click on "say hi" the error is gone.
How can I solve this?
I need the mouseEvents to set flags if the mouse is down or if it is up for multiple different controllers. I can not simply remove it in my code.
Edit:
Newer angular version solved my issue without $timeout v1.3.10 or higher
Use $timeout to let angular finish dirty checking then show the alert.
app.controller("demoController",function($scope,$window, $timeout){
$scope.save = function(){
$timeout(function(){
window.alert("hi!");
});
};
});
Plunkr: http://plnkr.co/edit/Kxbey5Rc43xsB9v5ugZ5?p=preview
Related
I'm trying to assign a function to a button using javascript, but for some reason it's not working. This is the button in question. At this point I'm just trying to make it responsive.
<button id="artbtn" class="artbtn btn">Art</button>
In the Chrome developer console I tried this:
document.getElementsByClassName("artbtn")[0].addEventListener(
"click", function(){
alert("hi")
})
and it did what I wanted, it threw up an alert. But when I tried using that script on the page... no response.
I'm using angular v1.2.7 with node.js which probably is contributing to this but I'm not sure what exactly is happening.
Best way to do this the angular way is to use ng-click
<button id="artbtn" class="artbtn btn" ng-click="clickHandler($event)">Art</button>
You will need to add the clickHandler function to your scope in your controller:
app.controller('MainCtrl', function($scope) {
$scope.clickHandler = function (event) {
alert('hi');
}
});
Here is a working plunker
I'm trying to create a GoBack button in Title Bar for WINJS application with Visual Studios. I tried lot of codes, but can't get it to work.
Some of codes show's only the GoBack button, but does actually no Action, i'm beginner with WINJS/JS, and can't get a code to work.
I tried with Examples, but can't get a right code from examples, because it's not a full code for Example /* Your success and error handlers */, i don't know what i actually should put into it. Can someone help?
I Tried with this code:
(function () {
"use strict";
var currentview = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
currentview.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;
function onBackRequested(eventArgs) {
WinJS.Navigation.back(1).done( /* Your success and error handlers */);
}
})();
Thanks.
EDIT
Ahm, how can i register a function as in Comments someone said? :x
"Make sure you register "onBackRequested" function to currentView.backrequested event."
And Thanks for Reply's
EDIT 2
Solved it, Thanks for Reply's
because it's not a full code for Example /* Your success and error handlers */, i don't know what i actually should put into it.
You can add success function implementation and error function implementation inside ".done()", but in your case, it is not necessary.
To make the back button functions,you can do follows:
Make sure you register "onBackRequested" function to currentView.backrequested event.
WinJS application should be a single page application, and navigation happens between PageControls or HtmlControls. Win8.1 Navigation Template offers a good example of Navigation, which can also be applied to the Windows 10 UWP. You can use it in your project.
I've made a basic navigation example that you can refer to: NavigationSample
The typeahead display gets stuck to the body when using append to body in combination with routing.
typeahead-append-to-body="true"
I used the Angular seed project and one of the simple Typeahead examples and replicated the problem: http://plnkr.co/WSNIRKLqOCLqO87jp3an
Load page
Select 'view2'
Select 'view1'
Type alpha character 'a' into the input
Observe the typeahead display attached to the body
Select view2
Observe display is still attached to the body
Problem happens in all the browsers I tried.
I see the click bindings to the document fire but the dismissClickHandler is not called if the page is has been routed to before. Meaning it works fine the first time, but when you go back to a page that you have been to before it never firs the dismissClickHandler.
https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js
// Keep reference to click handler to unbind it.
var dismissClickHandler = function (evt) {
if (element[0] !== evt.target) {
resetMatches();
scope.$digest();
}
};
$document.bind('click', dismissClickHandler);
originalScope.$on('$destroy', function(){
$document.unbind('click', dismissClickHandler);
});
var $popup = $compile(popUpEl)(scope);
if ( appendToBody ) {
$document.find('body').append($popup);
} else {
element.after($popup);
}
Any thoughts?
Please note that this is fixed using the latest versions of Angular (1.4.7) and Angular UI Bootstrap (0.14.3) - at the time of this writing. As such, I've closed https://github.com/angular-ui/bootstrap/issues/2551.
I believe this is a bug of the angular-bootstrap to not call $popup.remove() when its scope has been destroyed.
The reason it seems to work fine at the first time is because when you navigate to view 2, the template has't been ready in a cache yet, so it take sometime to load, and that allow the dismissClickHandler() to get executed and hide a popup.
But just hidding the popup is not enough. It should be removed from the DOM.
In your plunker, if you navigate back and forth between views a few times, then inspect the DOM, you will see a lot of dangling ui elements are still there but hidden in the document.body.
runTarm put me on the right track. This is my (quite dirty) fix, I remove the typeahead from the DOM on destroy of the scope:
originalScope.$on('$destroy', function(){
$document.find('[id^=typeahead]').remove();
$document.unbind('click', dismissClickHandler);
});
I submitted a bug: https://github.com/angular-ui/bootstrap/issues/2551
I'm using angular-ui-tinymce (latest version 0.0.4, https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js).
I've encountered a problem I cannot solve.
On the first page load, content is loaded to the editor via ng-model.
Then I navigate to another state and then navigating back to state with the editor.
The value still exists on the scope (I've checked it) but the content doesn't appear in the editor for some reason I cant figure..
This is the the textarea with the directive as attribute:
<textarea rows="10" class="form-control" id="desc" ui-tinymce ng-model="valueFromScope"></textarea>
This changes happened after updating AngularJS from 1.5 to 1.2.1.
I thought it had something to do with ngSanitize but I'm not sure..
btw angular-sanitize and ngSanitize are included in the app.
Any advice?
update
It seems like ngModel.$render is not doing anything.
ngModel.$render = function() {
console.log(ngModel);
tinyInstance = tinymce.get(attrs.id);
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
updateView();
}
};
Nothing is printed out, not even undefined, this means ngModel.$render doesn't even run.
Any reasons for that?
Update
I don't think model.$render is related, from what I understand $render only executes on a programmatic change like actually editing the text and that works..
I still can't figure it out, sometimes the value is shown and sometimes not.
Problem Solved! - for now..
Thanks to #alonisser I've found a solution.
From what I understand, the problem is occurring because something has changed in the prioritizing of angularjs directives.
read the following:
http://iwang.github.io/html/angular/angularjs/2013/11/04/ngmodel-render-cannot-be-overriden-in-angular-rc3.html
the simple fix is just to add priority definition to the directive
return {
priority: 10,
require: 'ngModel',
Setting the priority doesn't really solve the problem.
The only thing that worked for me was adding the following code before the ngModel.$render = function()
var stopWatch = scope.$watch(attrs.ngModel, function(newValue){
if (!tinyInstance){
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(newValue);
stopWatch();
}
});
When I assign a new value to the model of AngularJS I notice there is a little delay before the page gets refreshed with the data of the new model. This happens especially if the model is a very fat one.
I am thinking of showing a mask div while AngularJS is applying the new model to view. Is there a way to do this ?
Basically I would like to get notified when AngularJS finishes applying the new model to the HTML view.
Thanks
Assuming you are doing that work inside of a controller, one option would be using the ng-show directive on your masking element like:
<div ng-controller="someCtrl">
<div ng-show="loading">I'm a mask</div>
</div>
And in your app:
myApp.controller('someCtrl',function($scope,$timeout){
function doHeavyLoading(){
// do the loading here
$scope.loading = false;
}
$scope.loading = true;
$timeout(doHeavyLoading, 0)
});
This could be done inside a directive's controller as well.
Edit: As #MarkRajcok pointed out, there would be no render in between $loading = true and $loading = false due to javascript's single-threaded nature. I've added a $timeout to postpone the execution of the heavy loading and give the mask a chance to render.
Fiddle: Working fiddle here Make sure to press 'Run' after the fiddle loads, it won't work on first load because the fiddle waits for all windows to complete.