How do I force changes to the internal scope of an angularstrap popover directive to update the scope of the parent controller?

Question

I am using angularstrap popovers to create a simple popover exposing a date/time picker.

Here is the popover itself

<div class= "form-group form-group-sm">                                                                                                                                                                        
    <button type= "button" class= "btn" id= "start-select-btn"                                                                                                                                                 
        data-placement= "bottom"                                                                                                                                                                               
        data-template= "/static/partials/popover/start.html"                                                                                                                                                   
        data-auto-close= "true"                                                                                                                                                                                                                                                                                                                                                                 
        bs-popover                                                                                                                                                                                             
    >                                                                                                                                                                                                          
        Start <span class= "caret"></span>                                                                                                                                                                     
    </button>                                                                                                                                                                                                  
</div>
<button ng-click= "check()"></button>

And here is the template that it is pulling in. (start.html)

<div class= "popover" id= "start-menu">                                                                                                                                                                            
    <div class= "arrow"></div>                                                                                                                                                                                     
    <div class= "popover-content">                                                                                                                                                                                 
        <input type= "text" class= "form-control" uib-datepicker-popup ng-model= "startDate"/>                                                                                                               
        <uib-timepicker ng-model= "startTime"></uib-timepicker>
    </div>                                                                                                                                              
</div>

So basically, something that you click and a date picker/time picker drops down. What I can't seem to figure out is why my $scope is not being updated with the values from the datepicker. Here is what I mean...

Suppose I change something inside the datepicker that drops down. Then I click my "check()" method defined inside my controller

$scope.check = function() {
    alert($scope.startDate);
}

This alerts whatever I have initially set my startDate to. Changing the value in the input field does not change the scoped value of startDate. What's more, once I close the popover and reopen, the value is reset to the initial value.

So to me, this seems like an issue of the internal scope of this popover directive not changing the parent's scope.

I tried updating the template a little bit

<div class= "popover" id= "start-menu">                                                                                                                                                                            
<div class= "arrow"></div>                                                                                                                                                                                     
<div class= "popover-content">                                                                                                                                                                                 
    <input type= "text" class= "form-control" uib-datepicker-popup ng-model= "$parent.startDate"/>                                                                                                               
    <uib-timepicker ng-model= "$parent.startTime"></uib-timepicker>
</div>

The ng-model is now "$parent.startDate" instead of just "startDate".

This seemed to have a bit of a minor positive effect. Whenever I close the popover, the previously entered value to the datepicker now persists.

However, when I execute my "check()" function from before, the alerted value ($scope.startDate) remains unchanged.

I believe this issue has to do with the popover itself and not my datepicker/timepicker, because they worked with the scope in the manner I am intending before I tried to put them inside the template for a popover.

So, how to I get the internal scope of this popover to mirror exactly the parent scope of my controller?

edit : I tried passing in a scope on the "bs-popover" attribute like this

...
bs-popover= "startScope"
...

and then inside my controller

$scope.startScope = {
    startDate : $scope.startDate
};

This did not work.. when I clicked my checker button to test, the alerted value was still whatever was initially inherited from the parent scope.

Can you please create a runnable snippet with your problem? – fracz Jul 13 '16 at 18:55 — fracz, Jul 13 '16 at 18:55
Sadly I cannot. Behind a firewall. – Zack Jul 13 '16 at 18:55 — Zack, Jul 13 '16 at 18:55
I meant JSFiddle or something like that :-) – fracz Jul 13 '16 at 19:08 — fracz, Jul 13 '16 at 19:08
Figured out something that works, see my answer – Zack Jul 13 '16 at 19:40 — Zack, Jul 13 '16 at 19:40

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

I got around this by doing something like this.

$scope.start = {
    startDate : $scope.startDate,
    startTime : $scope.startTime
}

And then in the template

ng-model = "$parent.start.startDate"

Don't have a great explanation as to why this worked, but this post and this post led me to the promised land.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 13 '16 at 19:40

Zack

13,454
24
75
113

How do I force changes to the internal scope of an angularstrap popover directive to update the scope of the parent controller?

1 Answers1