如何强制更改 angularstrap popover 指令的内部范围以更新父控制器的范围？答案

【问题标题】：How do I force changes to the internal scope of an angularstrap popover directive to update the scope of the parent controller?如何强制更改 angularstrap popover 指令的内部范围以更新父控制器的范围？
【发布时间】：2016-07-13 18:22:17
【问题描述】：

我正在使用angularstrap popovers 创建一个简单的弹出框以显示日期/时间选择器。

这是弹出框本身

<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>

这是它正在拉入的模板。（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>

因此，基本上，您单击的内容和日期选择器/时间选择器会下拉。我似乎无法弄清楚为什么我的 $scope 没有使用 datepicker 中的值进行更新。这就是我的意思...

假设我更改了下拉日期选择器中的某些内容。然后我点击控制器中定义的“check()”方法

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

这会提醒我最初将 startDate 设置为什么。更改输入字段中的值不会更改 startDate 的范围值。更重要的是，一旦我关闭弹出框并重新打开，该值将重置为初始值。

所以对我来说，这似乎是这个 popover 指令的内部范围没有改变父级范围的问题。

我尝试稍微更新一下模板

<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>

ng-model 现在是“$parent.startDate”，而不仅仅是“startDate”。

这似乎有一点点积极的影响。每当我关闭弹出框时，之前输入到日期选择器的值现在仍然存在。

但是，当我执行之前的“check()”函数时，警报值 ($scope.startDate) 保持不变。

我认为这个问题与弹出框本身有关，而不是我的日期选择器/时间选择器，因为在我尝试将它们放入模板中以进行弹出框之前，它们以我想要的方式使用范围。

那么，如何让这个弹出框的内部范围准确地反映我的控制器的父范围？

编辑：我尝试像这样在“bs-popover”属性上传递一个范围

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

然后在我的控制器内部

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

这不起作用..当我单击检查器按钮进行测试时，警报值仍然是最初从父范围继承的值。

【问题讨论】：

您能否针对您的问题创建一个可运行的 sn-p？
很遗憾我不能。在防火墙后面。
我的意思是 JSFiddle 或类似的东西 :-)
想出了一些可行的方法，请参阅我的答案

标签： angularjs scope popover angular-directive angular-strap

【解决方案1】：

我通过这样做解决了这个问题。

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

然后在模板中

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

没有很好的解释为什么这会奏效，但 this post 和 this post 将我带到了应许之地。

【讨论】：