I am trying to get two multiselect widgets to stay in sync, but am only able to get the behaviour going in one direction.
One widget is on the main page, and the other one is in an angular ui-bootstrap modal. Both multiselect widgets are created using a custom directive. Each instance of the directive is bound to a different controller (MainCtrl and ModalCtrl). The "selected" attribute of each instance of the directive is bound to a scoped variable in their respective controller, which is in turn bound to the same getter method in the Model (getSelectedFilters).
If I change the selection on the widget on the main page, the change is reflected in the widget in the modal panel. However, if I change the selection in the modal panel, the change isn't reflected in the widget on the main page even if the Model has been properly updated (the button "Show currently selected" will show the correct selection even though the widget doesn't). I don't understand the difference at all.
Here is a stripped down plnkr illustrating my problem.
http://plnkr.co/edit/nC5bkGFE4LkYZsaxdjL7?p=preview
I am entirely new to Angular, and would appreciate any input as to why my directive on the main page isn't being updated properly when the data in the model changes.
Version 7 of the plnkr was what I had initially posted.
Basically, calling $apply on $scope.selected whenever the value was changed was not enough to notify the other directive of the change. I also had to setup a $watch:
$scope.$watch('selected', function(newVal, oldVal) {
select2.val(newVal).select2(options);
});
I am now completely unclear as to why the select2 directive in the modal was updating at all without a $watch when I was modifying the select2 directive on the main page. I would love if someone could explain what was going on there! To anyone who might know, go back to version 7 to see what I mean.
Related
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.
We're building a page with Angular, Angular-UI and UI-Bootstrap. The last one includes a directive for accordion, which simplifies a quite repetitive task of building up an accordion and an accordion group.
We, however, must watch for changes from an input inside that accordion. Problem is that the accordion has a child scope and it work work.
Here's a sample from Plunker (open the accordion by clicking on "Just a heading").
Is it possible to track changes into that input?
Try to $emit a custom event. It should bubble up to your scope. Worst case you should be able to listen to that event on the $rootScope
so something like :
$scope.$emit('input:change',{DATA});
on the accordion controller
and
$scope.$on('input:change'),function(data){
//do stuff with the change in input
})
I am trying to build out a multistep form for a complex object. I use the modal to section out parts of the form. The Ionic examples I could find, appear to assign a different controller to the modal. I would like to keep the view plus all the modals it launches, all of them associated with one controller. Is that possible? I tried assigning to the modal view ng-controller="viewCtrl" where viewCtrl is also the controller of the starting view that launches the modal, but it appears to hang chrome with a high CPU which subsequently necessitates killing the chrome tab.(some sort of cyclic effect by calling the same controller??)
Your advice/insight would be welcome.
I assume that your modal is a directive.
I also assume that you have it placed inside the view (controller scope).
If the above are correct than the directive inherits the $scope properties and methods from the parent controller (a general thing in angular), unless your directive has an isolated scope (if you have the scope property in the directive set to anything but false).
If your directive has an isolated scope you can still pass data from the parent using attributes on the directive. If you want to pass something from the directive to the parent you can use $emit.
You can also access the parent from the directive using $parent but I would suggest against it.
I have the following example.
Two kendo UI buttons and two regular buttons. Both should enable/disable the button on bottom. Only the regular buttons do and I don't understand why. Probably has something to do with the scope...
EDIT:
From another example I have, it seems like the scope is updated correctly but the ui is not updated. In my example i have another control that when I click it the ui is suddenly being updated.
Found the answer:
When clicking the kendo button the scope does change but it doesn't go through angular so angular doesn't know that the scope was changed so the digest cycle doesn't run.
So adding $scope.$apply(); at the end of the function triggers the digest.
Took the explanation from here.
I have a directive that creates and manages a bootstrap modal dialog.
Currently I have the directive watch a boolean held on the controller. The controller can then set this to true to have the modal dialog display.
This seems kinda messy. Is there a better way?
The directive in action:
<modal trigger="shouldDisplayModal" title="{{modalTitle}}"
message="{{modalMessage}}" positiveclick="okClicked()"
negativeclick="closed()"
positivelabel="Ok" negativelabel="Cancel"/>
The watch in the controller of the directive:
// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){
if (newValue)
{
// enable any disabled buttons
modalElem.find('button').removeClass('disabled');
// show the dialog
modalElem.modal('show');
}
else
{
// hide the dialog
modalElem.modal('hide');
}
});
Here is a working example: http://jsfiddle.net/rabidgremlin/Ya96z/31/
UPDATE: Here is a fixed up example that corrects some issues with multiple directives on a page: http://jsfiddle.net/rabidgremlin/sjbCJ/1/
I was going to suggest using ng-show inside your directive's template (this what the dialog component on the directive page does, along with a visible attribute that is just like your trigger attribute), but then I saw that you also need to enable some buttons before modifying the visibility.
So, I think what you have is fine, and I don't see it as messy. Either your directive has to $watch for something, or you could create the dialog when an event happens -- this seems to be what the $dialog service does that #pkozlowski mentioned in the comments. The latter would not need a trigger attribute.
I blogged about working with angular and bootstrap modals just a couple weeks ago.
My solution involves a service, all of the hide/show magic for the modal is handled by bootstrap's javascript, and angular just worries about the data.
http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely