Question

我有一个AngularJS应用程序，我尝试使用叠加层。基本上，我有几个面板，当用户点击一个面板时，它应该将$scope.selectedPanel设置为单击的面板，然后显示叠加层。相反，它显示叠加层而不通过数据绑定$scope.selectedPanel更新它。它会更新对象，但此更改不会反映在向用户显示的内容中。

调用HTML

<div ng-click="pickPanel(panel);" ng-repeat="panel in panels track by $index">
    <p>{{panel.title}}</p>  
</div>

Javascript设置selectedPanel＆amp;初始变量

$scope.panels = [];

$scope.selectedPanel = "";

$scope.panels.push(
    {panelID:1, 
     title:"Panel #1", 
     room:"",
     startTime: "Friday 2:30 PM",
     endTime: "Friday 3:30 PM",
     hostedBy: "The Host",
     description:"This is a description of the panel"}
);

$scope.panels.push(
    {panelID:2, 
     title:"Panel #2", 
     room:"",
     startTime: "Friday 3:30 PM",
     endTime: "Friday 3:30 PM",
     hostedBy: "The Host",
     description:"This is a description of the panel"}
);

$scope.pickEvent = function(panel){
    setTimeout(function() {     
        $scope.selectedPanel = panel;
        document.getElementById('overlay').style.display = 'block';
     }, 1000);
}

重叠HTML

<div id="overlay">
    <div id="overlayContainer">
        <div class="card">                          
            <p>{{selectedPanel.title}}</p>              
        </div>
    </div>
</div>

所以似乎正在发生的事情是，我第一次单击其中一个面板时，它会转到pickEvent方法，设置所选事件，然后显示叠加层 - 但是，叠加层本质上是落后一步。因此，当我第一次单击FIRST面板时，叠加层将显示null标题。但是，如果我关闭它，然后单击第二个面板，则会显示我选择的FIRST面板的标题。然后，如果我选择第三个面板，则会显示我选择的第二个面板。

AngularJS是否缺少某些内容，特别是在我将$scope.selectedPanel设置为已通过的面板的情况下，会强制刷新重叠HTML？

Answer 1

您正在修改模型而没有角度知道它。使用onclick更改ng-click，使用setTimeout更改$resource，让角度处理其绑定。

如果您从外部来源（onclick，intervals等）更新模型，则必须通过调用$scope.$apply()让角度更改，或使用{{3}而是ng-click而不是。

DOM不使用绑定的$ scope对象进行更新

1 个答案: