I am fairly new to AngularJS and the TinyMCE editor. I was fiddling around with the keyup event available in TinyMCE when I came across this issue. In the keyup handler, I am accessing one of the controller's ng-model. Here's where things start to get odd. I printed out the ng-model value and the editor's content for comparison purposes and it would seem that the ng-model is lagging by 1 key/character behind i.e. the editor's content is the most up to date. I have a hunch that the model is updated only after the keyup event is finished. That would explain why I am seeing two values here. Perhaps I am going about this the wrong way? Speaking of which, what would be the best/correct way to access the editor's contents? Through angular or TinyMCE?
If it helps, the code looks something like this (They are placed under a single controller):-
...
this.text = "";
var viewModel = this;
this.tinymceOptions = {
setup: function (editor) {
editor.on('keyup', function (e) {
console.log(editor.getContent());
console.log(viewModel.text);
});
},
...
};
Has anyone encountered this problem before?
Thanks for the help in advance!
Related
I am working on a problem wherein I am required to pick-up keydown events (specifically ctrl+p and then point to a print function which already exists) on a certain custom directive and under certain conditions (a certain tab should be selected). My current approach is to bind the keydown event on the document itself, broadcast it and then listen to it in the required custom directive. Following is the code I have placed in the app.run.. block -
angular.element($document).on('keydown', function(evt) {
if(evt.ctrlKey && evt.key==='p'){
$rootScope.$broadcast('printOnKeyPress');
}
});
This part is working as expected, the problem arises when I try to handle it in the required controller of the custom directive as follows:
$scope.$on('printOnKeyPress', function() {
//point to existing print function
}
This is where the problem arises. It goes into the print function but still the output is incorrect. I am missing something and I can't figure out what.
Also, this is not a good approach but I have searched and am unable to find a possible solution to just bind the keydown event on that custom directive itself (the component only appears if a document is selected).
(ng-keydown won't also work here)
Any help is appreciated!
You could put it in the directive and use the scope destroy event to remove the listener.
Within directive link function:
function keyHandler(evt) {
if (evt.ctrlKey && evt.key === 'p') {
// do your print
}
}
angular.element($document).on('keydown', keyHandler);
scope.$on('$destroy', function() {
angular.element($document).off('keydown', keyHandler);
});
I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.
Using either of these doesn't seem to work.
var el = document.getElementById(focusId);
el.focus();
angular.element(el).focus();
I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.
http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview
If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:
var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");
You can also pass in an id like: angular.element(document.querySelector('#focusId'));
You can look here for a prior answer which may be of some more help!
-Cheers!
Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.
setTimeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
or
$timeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)
I'm trying to intercept a checkbox change so I can put a confirmation stage in the middle and I am experiencing strange behaviour.
When I click the checkbox preventDefault is stopping the UI from changing the checkbox, except the bound model will change once and then no longer be changeable.
Any ideas on how I can fix this? Am I approaching this wrong?
$scope.change = function(selected, $event){
$event.preventDefault();
};
https://jsfiddle.net/tcVhN/197/
edit: Answers to JB's questions below:
I am trying to intercept the checkbox change so I can put a confirmation step in the middle IE "Are you sure you want to change
this text box?"
Just updated to 1.47 (and updated jsfiddle link).
I'm using ng-click because ng-change doesn't pass the event
through which means I can't cancel the ui change via
$event.preventDefault.
See above.
I have modified your Fiddle to make it work:
https://jsfiddle.net/masa671/8qrct4y2/
Notice the change in HTML: ng-model="x.checked" to ng-checked="x.checked".
JavaScript:
$scope.change = function(selected, $event){
$event.preventDefault();
$timeout(function () {
if (window.confirm('Are you sure?')) {
selected.checked = !selected.checked;
}
});
};
The key problem for me was to find out, how to prevent the checkbox status from changing until the user has confirmed the change. I don't know the best/right solution, but I resolved this so that the event handler just prevents the default behaviour, and the actual change is handled outside the event handler with the help of $timeout.
At least the Fiddle seems to work in a sane manner... :-)
I'm using angular chosen with angularstrap and i'm having problems with the initial value of the selector to be selected. The way i got it to work is i set a Timeout on the model attached to the selector to wait for the dom and then set the model value. So my guess is that chosen needs to wait for the dom to be created before it can initialize the selected option.
$scope.showModal = function() {
myModal.$promise.then(myModal.show);
// hack to make chosen load
$timeout(function () {
myModal.$scope.SelectedColor = "green";
}, 500 );
};
in my opinion this timeout solution is not a good one and i would like to find a better way to set the model after the dom has been created.
This is because chosen directive is calling trigger("chosen:updated") before the DOM is actually loaded. A fix would be adding $timeout() to the $watchCollection trigger.
This has been discussed and looks like the solution is here in the answer from kirliam.
Someone should issue a pull request for this issue.
edit: I issued a pull request for a fix regarding this issue. Hope it gets merged in.
Through code, I would like to manually enter some characters to a input using JQuery.
I am using this:
var e = jQuery.Event("keypress");
e.which = 97;
$("input").trigger(e);
I also have a eventhandler attached to the input that is logging the triggered event correctly along with the keyCode etc.
In other words the event does seem to be fired through code and get handled too. However, the value on the input is still empty. The character is not added there. Not sure what is going on.
EDIT: I am creating automated tests that is supposed to trigger a keypress on my autocomplete compoment. the App is written using AngularJS. It is not possible to put all the code and html on JSFiddle etc. I have isolated this to be a Jquery problem as stated above.
I know I can use val() directly but that will not trigger the keypress events necessary for the plugin to work
Did you tried:
$("input").keypress(function(){
$(this).prop('value', 'your value')
});