Angular指令不更新ng-repeat中的对象

Question

我有一个显示文件夹树的指令。该指令是递归的，用于显示子文件夹。

<div ng-click="toggleOpen()"  class="action">
    <span ng-if="folder.opened"><img class="icon" src="assets/img/load.png"/></span>
    <span ng-if="!folder.opened"><img class="icon" src="assets/img/closed.png"/></span>
    {{folder.name}}
    {{folder.opened}}
    <ul ng-if="folder.children.folder" class="folder">
        <li ng-if="folder.opened" ng-repeat="fol in folder.children.folder">
            <my-folder folder="fol"></my-folder>
        </li>
    </ul>
    <ul ng-if="folder.children.query" class="folder">
        <li ng-if="folder.opened" ng-repeat="query in folder.children.query">
            <img class="icon" src="assets/img/copy.png"/>
            {{query.name}}
        </li>
    </ul>
</div>

每个文件夹都有一个属性opened。当我点击元素时，我调用一个函数来切换打开的状态：

$scope.toggleOpen = function(){
    this.opened = !this.opened;
}

但是，每当我点击此按钮时，文件夹都不会关闭。当我在toggleOpen上设置断点时，我发现this.opened的值始终为true。即使它刚刚更改为false。

任何人都可以帮忙吗？

Answer 1

可能this没有引用您的想法。尝试做：

var self = this;
$scope.toggleOpen = function(){
    self.opened = !self.opened;
}