javascript - 如何让 ng-show 在 ng-repeat 中在该范围外声明的变量上工作？

Question

我刚开始使用 Angular.js，但我遇到了 ng-show 的问题。

当我点击第一个 block #first-block 时，第二个 block #second-block 切换其 ng-show/ng-hide。行得通。

但是当我点击第三个 block #third-block 时，我想要相同的行为。 那行不通。

我尝试过 ng-click="show = true" 但没有成功。

<div  ng-controller="CommentController">

    <div id="first-block"  ng-click="show = !show">
        <!--first block-->   
    </div>

    <div id="second-block"  ng-show="show" >
        <!--second block that toggle show/hide when I click on first block.-->    
    </div>

    <div ng-repeat="answer in answers" > 

        <div id="third-block" ng-click="show = !show">
             <!--third block. Nothing is happening when I click on this one.-->   
        </div>

    </div>
</div>

谢谢你的帮助

Answer 1

这是因为 ng-repeat 创建了一个新的作用域，其中被嵌入的元素在一个单独的作用域中，你可以使用像这样的对象

<div id="first-block"  ng-click="state.show = !state.show">1</div>
<div id="second-block" ng-show="state.show">2</div>
<div ng-repeat="answer in answers" >
    <div id="third-block" ng-click="state.show = !state.show">{{$index}}</div>
</div>

然后

app.controller('CommentController', function ($scope) {
    $scope.state = {}
    $scope.answers = [1, 2, 3]
})

演示:Fiddle

---

或者使用 $parent

访问 ng-repeat transclude 中的父作用域

<div id="first-block"  ng-click="show = !show">1</div>
<div id="second-block"  ng-show="show">2</div>
<div ng-repeat="answer in answers" >
    <div id="third-block"  ng-click="$parent.show = !$parent.show">{{$index}}</div>
</div>

演示:Fiddle