如何强制更改 angularstrap 弹出框指令的内部作用域以更新父控制器的作用域

Question

我正在使用角度波框来创建一个简单的弹出框，公开日期/时间选择器。

这是弹出窗口本身

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

这是它正在拉入的模板。（开始.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没有使用日期选择器中的值进行更新。这就是我的意思...

假设我在下拉的日期选择器中更改了一些内容。然后我单击控制器中定义的"check（）"方法

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

这会提醒我最初将开始日期设置为的任何内容。更改输入字段中的值不会更改 startDate 的范围值。更重要的是，一旦我关闭弹出窗口并重新打开，该值就会重置为初始值。

所以对我来说，这似乎是这个弹出式指令的内部范围的问题，而不是改变父级的范围。

我尝试稍微更新模板

<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模型现在是"$parent.startDate"，而不仅仅是"startDate"。

这似乎产生了一点轻微的积极影响。每当我关闭弹出框时，以前输入的日期选择器值现在仍然存在。

但是，当我执行之前的"check（）"函数时，警报值 （$scope.startDate） 保持不变。

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

那么，如何让此弹出窗口的内部作用域完全反映控制器的父作用域呢？

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

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

然后在我的控制器内

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

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

Answer 1

我通过做这样的事情来解决这个问题。

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

然后在模板中

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

对于为什么这有效没有很好的解释，但是这篇文章和这篇文章将我带到了应许之地。