I cannot figure out how to make a two-way-binding to an mddialog. Can anyone give me an example, where data passed to a mddialog is updated when it is updated in the original scope?
I have tried parsing data using 'locals' with no avail, setting the dialog scope to the main scope, etc. But I must be doing something wrong.
As an example I expect a mddialog to be open (using $mdDialog.show()). The modal template show a number, that can be increased by one when clicking a button on the dialog template. At the same time, the number is also outside the modal (parent), with another button that can decrease the number when clicked. The number is updated in both places when either button is clicked.
Related
Note: I am not well versed with angularjs/frontend dev as such, so I may be using wrong words/terms.
I have a form as a result of a html and a controller. Controller has functions defined which are invoked when user performs some actions as defined in html, like clicking a button.
One of the UI element in the form is ui-select. It enables user to select multiple values from a dropdown.
What I want is that when user clicks on one of the selected value from ui-select, a new dialog window opens up wherein user can provide some input value, close it, return to original open form, and value from dialog box gets appended to the original clicked value from ui-select.
I want to know what is best way of creating an input dialog box in angular.
I see $uibModal being used which can be used to create a form by combining a html and a controller. But I have a usecase for a simple dialog box. So it seems $uibModal is bit of an overkill.
Is there an easier way of doing this?
I have a very simple code snipper in my page where I have a span. Hovering over this span displays a popover for which I am using angular-ui-bootstrap.
<span uib-popover="This is a popover from Akhilesh"
ng-mouseenter="vm.logToConsole('I am trying hard...')"
popover-trigger="mouseenter">Hover over me to see a popup..!!</span>
Basically I have written a function which makes and API call when the user hovers over this span. The problem here is that let's say I have 10 span tags one below the other and the user quickly moves from 1st span to 10th span (in the process hovering over all 8 spans in between), the API call will get triggered for all the spans. This is what I do not intend to have.
Any idea how can I implement the debounce functionality here?
Use a delay, like one second, after the mouse enters the region, then if the mouse hasn't entered another area, make the API call.
The popover-is-open attribute was added under the 0.13.4 release that can be used to watch the state of your popover like so:
<span uib-popover="This is a popover from Akhilesh"
popover-is-open="vm.isOpen"
popover-trigger="mouseenter">Hover over me to see a popup..!!</span>
Then in your controller:
$scope.$watch('isOpen', function() { });
But if you are just trying to keep the popovers from opening so quickly, consider using the popover-open-delay attribute.
Depending on your use, I found the best method is to simply add ng-mouseover, ng-click etc to the element and define a function to be called.
You can even create a variable and attach it to that objects scope on the fly to keep track of the state (open close).
Kind of hacky, but there is currently no way to define a function that is called on open and on close within ui-bootstrap popover.
I am using ng-repeat for iterating through a list of objects, and for each item in the list there are child objects which are edited in a Bootstrap modal popup. I am unable to use the Angular modal service as it conflicts with the Bootstrap CSS already in use on the page. Angular modals would let me take values back from the modal popup on modal close, but I am unable to use it due to existing code.
To work around this problem, I am passing the child object to the function that opens the modal popup. In this function, I assign this passed object to an Angular model/jQuery Object (say "x") (either way I tried, it gives same result) so that I can update this new object x with the changes done in the modal popup.
I believe that these variables as copied and points to the same object, when I update one, it should update the other one and so my original Angular model should be updated as well. But, to my surprise, the original model is not updating until I open the modal popup again. When I open the modal popup again, it does not update variable "x" but merely is updated with the ng-model I use on page.
To debug this further, I printed my ng-model on page and it is not updated till modal popup is opened again. To contrast this further if I alert length of this ng-model, it is updated (shows the changes I made in modal popup) but the ng-model object on page does not show new values.
I understand this is more of a theory and less code but I am not sure what part of my code would help find the problem. Kindly let me know and I will try sanitize my code and share.
Update:
While further digging, it looks like the model is updated but it did not reflect on page. So if for example on page I have condition that if no child objects, show Add button (edit otherwise), it does not change from add to edit button when I open modal first time and add values to child objects. When I open modal popup again, it changes link from add to edit even if I close modal popup without changes. So it is a problem with screen refreshing as such (my model updates reflecting on screen) instead of actual model update.
I'm using the UI-bootstrap modal window in my Angular application and I'm running into some kind of a scope problem.
I've got a modal dialog which basically has two modes. At first, it displays a list of existing items for the user to select from. In case the item the user needs is not in the list, he can click "Create", then I hide the div containing the list and display another div which contains an input form so the user can add an entry to the list. This is all really trivial stuff. The buttons to toggle which div is being shown work fine. I basically have a boolean scope variable called "create", which takes care of this.
Then, in the modal-footer I have two save buttons. One is shown when in "list" mode and the other is shown when the user is in "create" mode. Again, works fine.
Now, when the user is in "create" mode and clicks the corresponding "save" button, then I need to process the form and finally switch the state back to the list, that is set the "create" scope variable back to false, but this is not working for me. It's like I'm dealing with more than one scope since the view does not update when I update the "create" variable from the button click in the controller.
I've created a working Plunker which demonstrates this, please have a look:
http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview
I know this is probably something really simple I'm missing. Hoping someone can point me in the right direction!
EDIT: As per the suggestion below from Mik378, I created an "intermediate" object in the scope and assigned the "create" variable to it. Now this works like I wanted to.
I updated the Plunker: http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview
If you're using scope.myVariableToReach, you have to change that by scope.oneIntermediateObjectNotAccessibleInTheChildScope.myVariableToReach.
Otherwise, when you set scope.myVariableToReach directly, it would change the child one, not affecting the outer.
I have a simple example of Kendo UI dialog with Angular.
In the example there is a button which opens a Kendo modal dialog. Inside the dialog there is an input box and a close button.
I have two questions:
The ng-model of the input is "dialogOutput". I have a label outside of the dialog which is bided to this property but then the text inside the input is changed the label is not changed. I guess that the dialog has a different scope and that's why it behaves the way it is. What I don't understand is why when clicking the close button the scope of the close function is not the scope of the dialog? inside the close button I have alert($scope.dialogOutput) and it shows undefined.
What I want to do is when clicking the close button I want to "send" the data from the dialog to the outer scope, how can I do that?
Use dot notation to share an object between multiple scopes.
I have updated your jsbin
EDIT
When you write to a primitive type a new instance is created in your kendo directive scope not in the controller scope.
This kind of issue raises with primitive types. As explained here
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.