javascript - Angular-bootstrap 试图从 Controller 中调用 collapse

Question

我正在使用 Angular 1.2 和 bootstrap 3.x，我正在尝试使用 angular-bootstrap 插件折叠 DIV。我有一个带有搜索栏的表单，它使用我的自定义 $resource 服务从 Controller 中的服务器检索特定数据:

$scope.sendSearch = function(query) {
        $scope.results = Search.query(query);
};

我想在使用这段代码检索结果后取消折叠它们:

<div collapse="isCollapsed">
        <li class="well" ng-repeat="result in results" style="list-style-type: none;">

        </li>
    </div>

在通过添加具有正确 ng-click 操作的简单按钮来检索数据后，我能够做到这一点，但我的问题是 - 是否可以更改 Controller 中“isCollapsed”变量的值？我知道由于响应的“ promise ”性质，它可能会出现问题。当我尝试这样做时，我的 div 卡住为 class="collapsing"并且没有任何反应，hovewer - 我仍然能够使用上述按钮折叠/展开 div，这也固定了类属性。

Answer 1

只需创建一个范围观察器，看看结果是否已更改或已检索。

$scope.watch("results", function(newValue, oldValue){
  if (newValue.length > 0)
  $scope.isCollapsed = !$scope.isCollapsed;
})

或

$scope.watch("results", function(newValue, oldValue){
  if (_.isEqual(newValue, oldValue) ) // I used underscorejs
  $scope.isCollapsed = !$scope.isCollapsed;
})