Can someone tell me why the data in the scope is not getting passed to the controller.
Click on the Open Me . Add some text inside the modal window .Click Ok.
why empty items are getting added?
see this Plunker
Use following binding instead:
<textarea class="form-control" rows="3" ng-model="$parent.currentcommitment"></textarea>
Related
I'm using Angular UI Bootstrap datepicker popup with the option datepicker-append-to-body="true". Thus the popup is rendered to the <body>.
In my particular scenario I need to remove the DOM element containing the datepicker. Once the element is removed (with element.remove()) the popup stays in the body.
How should I remove the datepicker, so that popup will be also properly removed?
Here is the plunker demonstrating the issue:
http://plnkr.co/edit/zFew72PpY0E2ETwMKRpv?p=preview
I know that removing an element like this in Angular is not the right way, but I'm working on integration of existing jQuery widget with Angular, and this is done in the existing code. I'm trying to find a way to fix this.
Any help is appreciated.
Edit
Sorry, I believe some additional info is needed to clarify the case:
As I mentioned, I integrate a jQuery plugin with Angular. This is grid.
Grid can have editing row. Grid user can put a Angular UI Datepicker in the editing row to edit date field. Once a user clicks Save (or Cancel), the editing row is removed with $element.remove(). So this happens in the external lib code. What I can do, is to patch removing code and call some cleaning up code. The question is what this cleaning up code could be, so it will clean up the datepicker.
ng-if, unfortunately, is not an option, because patching code knows nothing about the content of the cell and fields of the scope. This code is generic, while datepicker is put in the cell by grid user. In fact it could be any other widget.
You could use ng-if to remove or add back to your html. here is a plunker:
$scope.showDatePanel = true;
$scope.removePanel = function() {
$scope.showDatePanel = false;
}
in your html:
<div id="panelToBeRemoved" ng-if="showDatePanel" class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" datepicker-append-to-body="true" is-open="popup.opened" />
</p>
</div>
</div>
hope it helps.
uib-datepicker use ng-if. it's mean if you assign true in is-open attribute is dynamically append into your body and if assign false then it's automatically destroy in your body tag. So when you press remove element button than assign is-open false. change in your example.js file ->
$scope.open = function() {
if($window.document.getElementById("panelToBeRemoved") != null){
$scope.popup.opened = true;
}
};
As a code is better than 1000 words, I've created a plunker in order to show my problem:
http://bit.ly/1uiR2wy
Given the specific DOM element, thing is that I have an input checkbox with an ng-change, I want to add an ng-click to the li that wraps it in order to be able to click in the whole area.
This new ng-click makes the method in the ng-change to happens twice. And is even worse for an SPAN DESCRIPTION 2 that is happening 3 times.
<li class="odd" ng-click="changeToggleModel($event)">
<span class="overcomeDescription ellipsis-overflow">span description</span>
<label>
<span>SPAN DESCRIPTION 2</span>
<input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
</label>
</li>
I've tried with stopPropagation and it seems that it doesn't solve the issue.
Any ideas about it?
If you check the plunker and open the console you'll see the issue perfectly.
Thanks in advance to everyone
You need to stop event propagation on label level. Try this:
<label ng-click="$event.stopPropagation()" ...>
Demo: http://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview
The reason why it happens is that the label (connected to corresponding checkbox) sort of generates one more click event in order to pass click to the input. This click event causes described strange issues, because it still bubbles like normal event (well it is normal event), and hence is detected by ngClick directives.
Late to the party but encountered the same issue- it seems like AngularJS propagates the click event separately and explicitly. Instead of stopping propagation on the label, you can catch it on the input explicitly:
<input
type="checkbox"
ng-click="$event.stopPropagation()"
ng-change="toggleSelection($event)"
ng-model="isSelected"
>
So I found out that if I use <textarea placeholder="Write something.."></textarea> inside ng-repeat, the placeholder of the textarea only shows on focus.
If I remove the ng-repeat of my parent element then my placeholder appears on page load.
Same result if I use something like <textarea name="{{repeat.id}}">
text inputs are working fine.
I'm using angularJS 1.3.0-beta.17 and ui-bootstrap-tpls-0.11.0
Any information on that?
Update:
I found out that if I set a ng-model, then the placeholder shows correctly.
I am kind of stuck here. I have an application which uses bootstrap modal with couple of text boxes which has values from server. When i open the modal for the first time and remove the items from textbox ng-change event fires. Once all the fields are cleared, i closed the modal. When i opened the modal again it is populated with new values but when i remove the item from the textbox ng-change event is not triggered.
But here i found one more strange thing, the above mentioned problem occurs only if we have one item in textbox.
Here is my html code:
<tr>
<td>
<input only-numeric class="floatLeft" name="scoreSample" type="text" ng-model="scoreSample" id="scoreSample" ng-change="sampleMethod()" ng-model-onblur>
</td>
<td>
<input only-numeric class=" floatLeft" name="errorSample" type="text" ng-model="errorSample" id="errorSample" ng-change="sampleMethod()" ng-model-onblur>
</td>
</tr>
AngularJS code:
$scope.sampleMethod = function () {
alert("Coming here");
}
Thanks in advance.
Possible reasons for this happening are listed in the documentation:
The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.
It will not be evaluated:
if the value returned from the $parsers transformation pipeline has not changed
if the input has continued to be invalid since the model will stay null
if the model is changed programmatically and not by a change to the input value
Note, this directive requires ngModel to be present.
Have you checked these things? Other than that I also think you should post the entire view and controller as it is very difficult to find an error in the snippet you posted already.
I am new to Angular and have basic problems, getting Angular-UI-Bootstrap to work in combination with AngularJS. Here a simple example, an usual input field that uses ng-change for event handling, and which has a popover. Without the popover attributes, the codes works fine. When the popover attributes are added, the popover is displayed correctly, and looks fine, but the event handler is not called, and also the password model not updated, when the value of the input field changes.
Same problem holds e.g. if I have a button with event handling code and a popover. Same problem also if I do not use popover, but tooltip.
<input type="password" ng-model="password" placeholder="New Password"
ng-change="onPasswordChanged()" popover="I am a popover!"
popover-trigger="mouseenter" />
I am using ui-bootstrap-tpls-0.3.0.js and AngularJS v1.0.7.
Does someone know what the problem is?
Popover directive creates a child scope, so when you bind your model to a primitive, the binding will stay inside that scope (it will not propagate upwards). See "What are the nuances of scope prototypal / prototypical inheritance in AngularJS?" for more info on inheritance.
Workaround is to use a dot notation when referencing your models:
<input type="password" ng-model="data.password" popover="I am a popover!"
popover-trigger="mouseenter" />
DEMO PLUNKER