I'm using Ionic framework to create my app.
I have a text input, with ng-model="answer", and bellow a have a button that starts speech recognition and then replaces the input text with the spoken one.
The problem is that I can't change the input's text programmatically when using the mic with $scope.answer="any text", it looks like it just doesn't change the view's value.
I found that I have to use a directive in order to bind the model, but to be honest I don't know how to address it right now.
Also I've tried $scope.$apply() but it works only the first time and when I haven't wrote any test directly to the input yet.
What you are looking for may be Angulars $watch() function, so you can handle any model changes even outside of the input field.
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
Related
I'm currently maintaining an AngularJS application and need to have html inputs use the ngRequired directive. However these inputs do not use ngModel-- just straight up value to display the value dynamically and ngClick to popup a modal window that will eventually set the value in an object that is not bounded to a model. Seems like ngRequired only works when paired with ngModel in order for the submit button to reflect changes appropriately (like enable/disable).
I tried to work around not using ngRequired by manipulating the ngInvalid CSS which works great for showing the required fields-- however it does not bubble up to the submit button (disabling it if one or more required fields have no input). Is there a way to emulate ngRequired without using it explicitly in AngularJS?
in my app, when editing a record, I've added an ActionListener to save a temporary copy of the edited values for each field automatically, so that if the app is put in the background and then stopped, the edited values can be recovered when the app is started up again.
However, with the TextAreas it doesn't work since actionListeners don't get called unless the user takes some action (like leaving the field). I need to use the TextArea since there can be multiple lines of text, so using a DataChangedListener for a TextField as suggested in this thread does not seem a viable solution. And being able to save the TextAreas is important to achieve good UX since the user likely loses more work when text is dropped than if for example a value set in a Picker is lost.
Is there another way to achieve this result?
Thanks in advance
TextField allows multiple lines using setSingleLineTextArea(false). When invoked it will function similarly to TextArea.
I just learn how to create angular.js directives.
I write simple directive for input with two-way binded selectionRange control.
When scope variable changes - selection range inside the input changes too.
How this behavior can be tested with Protractor.js?
I can not to find any method to get input current selectionRange/cursor position or even selected text.
You can found&playWith my directive here: Demo
Todo with what I want to achive here: github
When you change $scope data with form below, input selection changes.
I want just cover this behavior with test, and don't know how to get current selectionRange in the protractor environment.
Referring to the problem I've recently solved with the help of #trincot:
expect(browser.executeScript("return arguments[0].value.substring(arguments[0].selectionStart, arguments[0].selectionEnd);", elm.getWebElement())).toEqual("selected part of the input text");
Here selectionStart and selectionEnd are used to get the currently selected text in an input.
I wanted to have a Dialog box for asking to save the current changes or not. For that I was searching for an event in AngularJS which triggers on change of any scope variable.
As per my logic I will achieve this by creating event on every control and update a variable to say 'Modified' else will have default value.
Is there any other way? Since my logic will need an event on every control.
If you're using a form directive, this is pretty simple. The value of myForm.$dirty will be true if any property has changed. You can even check an individual field with myForm.myField.$dirty.
If you're not using a form, you should probably consider it for what it sounds like you're trying to accomplish. One of my favorite angular features as it makes validation, etc. a breeze!
Reference: angular docs
Take a look at $scope.$watch(...) on the Angular docs, there is a great discussion on how $watch works here on another Stack Overflow question
You should, at the very least, be able to trigger alerts when specific scope-elements have changed. If you are using a form, then the $dirty approach above is absolutely a brilliant way to go.
I would like to have a directive for my validation messages that takes the name of the form input being validated and then displays itself if the named form input is invalid. For the sake of good UI, I want this to only happen after the input is blurred. Here's a Plunkr: http://plnkr.co/edit/qLSsCHpAPLdZsCPG8iaf
Obviously, ctrl[attr.tgValidates] isn't giving me an object I can bind to (although it is referencing the correct field), but I'm not sure how to properly select the element I do want. jqLite doesn't have great support for selectors, so it's a tricky to do what I want without pulling in all of jQuery. I guess I could also pull in $document and select off that, but I'm wondering if there's a better, more Angular way to approach this?