Question

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

这是popover本身

<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）保持不变。

我认为这个问题与popover本身有关，而不是我的datepicker / timepicker，因为在我尝试将它们放入模板中进行弹出之前，它们以我想要的方式使用了作用域。

那么，如何让这个popover的内部范围完全镜像我的控制器的父范围？

编辑：我尝试在像这个

这样的“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"

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

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

1 个答案: