angularjs collapse + ng-if不起作用ng-show有效

Question

我有一个链接到UI Bootstrap的按钮 折叠指令，如果我点击它 脚本显示一个表单来回复评论。 当表单显示时我想隐藏按钮 但我有一种奇怪的行为

这不起作用：

<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
    <span class="glyphicon glyphicon-share-alt"></span> Reply
</a>

这项工作：

<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
    <span class="glyphicon glyphicon-share-alt"></span> Reply
</a>

我真的不知道为什么！

你能告诉我吗？

Answer 1

这是预期的，因为 ng-if 创建新子范围，并在第一次点击时在其中创建 isCollapsed 属性。但ng-if本身正在查看父范围。

尝试使用 ng-click

在控制器级别声明的 toggle（）函数

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

考虑使用规则：

  

在模板中将$ scope视为只读。