Angular ng-show没有显示正确的div

时间:2017-02-27 11:33:51

标签: javascript html angularjs

我尝试制作一个您在概览中的页面应用程序,当您单击某个项目时,您将获得包含信息的详细页面。

现在,当您第一次单击该项目时,它会显示详细信息并关闭概述。即使您按下后退按钮,它也会关闭详细信息并再次打开概述。但是你不能再回到细节了。我做错了什么?

这是我的divs

<div class="col-xs-12 alertSidebar">
      <div class="omgevingsalertOverview" ng-show="activeWindow=='overview'">
        >>> LIST OF ITEMS
      </div>
      <div class="alertDetail" ng-show="activeWindow=='detail'">
        <button ng-click="activeWindow = 'overview'">Ga terug</button>
      </div>
    </div>

这就是我在控制器中所做的事情

$scope.activeWindow = "overview";
function showFeatureDetails(featureId){
  $scope.featureId = featureId;
  $scope.activeWindow = "detail";
}

单击某个项目或Google地图中的标记

时,会调用showFeatureDetails函数

更新

当我在showFeatureDetails中执行console.log($scope.activeWindow)它首先打印出概述,而不是我转到详细信息它打印详细信息当我回到概述它仍然打印详细信息。所以它就像按钮上的ng-click不会影响范围?

更新2

现在有效。我做的是,我更改了按钮单击以在我的控制器内调用一个名为showOverview的函数。在那里我正在改变activeWindow。

完整代码:

<div class="col-xs-12 alertSidebar">
      <div class="omgevingsalertOverview" ng-show="activeWindow=='overview'">
        >>> LIST OF ITEMS
      </div>
      <div class="alertDetail" ng-show="activeWindow=='detail'">
        <button ng-click="showOverview()">Ga terug</button>
      </div>
    </div>
控制器中的

function showFeatureDetails(featureId){
  $scope.featureId = featureId;
  $scope.activeWindow = "detail";
  $scope.$apply()
}

$scope.showOverview = function(){
  $scope.activeWindow = "overview";
}

0 个答案:

没有答案