Question

我不理解上面代码中的行为。

我有一个$scope.isCollapsed布尔值，我在ng-repeat-start - ng-repeat-stop块中使用。

根据我的理解，我希望两个行同时崩溃，因为isCollapsed在两种情况下都是相同的。但实际发生的事情是它们似乎是独立的。

导致这种行为的原因是什么？

代码：

<tr ng-repeat-start="person in persons">
    <td>
        <a href="#" ng-click="isCollapsed = !isCollapsed">{{person.name}}</a>
    </td>
    <td>
        {{person.age}}
    </td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
    <td colspan="3">
        <h3>Details about {{person.name}}</h3>
        <p>Some details about {{person.name}}, {{person.age}}</p>
    </td>
</tr>

使用以下控制器：

var app = angular.module('personApp', ['ui.bootstrap']);
app.controller('personCtrl', function($scope) {
    $scope.isCollapsed = true;
    $scope.persons = [{ name: "John",
                        age: "40yrs" },
                      { name: "Kevin",
                        age: "50yrs" }];
});

Codepen：http://codepen.io/anon/pen/ojpaNR

Answer 1

ng-click="collapse()"

控制器中的

$scope.collapse=function(){
   $scope.isCollapsed=!$scope.isCollapsed;
}

给出预期的行为

why ?

因为当你尝试在html中更改isCollapsed时它位于不同的范围内，但是当你通过上面的函数方法执行它时它处于相同的范围内。

要测试此功能，您可以尝试

ng-click="isCollapsed = !isCollapsed;test($index);"

并将测试定义为

 $scope.test=function(index){
            setTimeout(function(){
                console.log('test: '+index);
                console.log('$scope.isCollapsed: '+$scope.isCollapsed);
            },10)
        }

它将始终打印为真。

如果你想使用你的方法，那么把它作为

$rootScope.isCollapsed = true;

ng-click="$root.isCollapsed = !$root.isCollapsed;"

控制器和一些向dom添加元素的指令创建了自己的范围（ng-if，ng-switch，ng-repeat，ng-view等）。您可以使用AngularJS Batarang chrome扩展来帮助调试它们。这些值是继承的，但在子范围中设置值会破坏继承。

从上面获取文字 Scope variable is not updated on ng-click in views with Angular UI Router

Answer 2

没有指定第一个tr元素的属性何时折叠。在第二个<tr>元素中，属性collapse="isCollapsed"将根据isCollapsed值折叠元素。

ng-repeat中的$ scope.variable

2 个答案: