AngularJS ng-show不工作

Question

我正在尝试让按钮"Detalhes“来切换div来显示一条消息。

显然没什么问题。首先..。我的HTML

            <tr ng-repeat="chamado in cabertos">
                            <td>{{chamado.numero}}</td>
                            <td>{{chamado.user}}</td>
                            <td>{{chamado.assunto}}</td>
                            <td>{{chamado.status_chamado}}</td>
                            <td><button ng-click="mostra()">Detalhes</button></td>
                        </tr>                               
                    </tbody>
                    <div ng-show="{{visivel}}">
                        <h3>Mensagem enviada:</h3>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                 </table>
            </div>

我的脚本：

app.controller('mostra',function($scope){       
    $scope.visivel = false;
    $scope.mostra = function() {
        if($scope.visivel==false) $scope.visivel=true;
        else if($scope.visivel == true) $scope.visivel=false;
    };
});

当我在我的页面中按下F12时，由于未知的原因，有一个ng-hide不允许我切换我的div：

<div ng-show="false" class="ng-hide">
                        <h3>Mensagem enviada:</h3>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>

Answer 1

变化

<div ng-show="{{visivel}}">

至

<div ng-show="visivel">

编辑-添加为什么会这样的解释。我引用了Evan的话，因为我不能比他更好地解释这一点。

为什么会这样？

显示$scope.visive1变量不需要通过在ng-

指令中使用双括号进行插值。短指令中的不需要大括号，而表达式需要它们- @Evan Bechtol

Answer 2

你应该这样做

ng-show="visivel"

而不是

ng-show="{{visivel}}"

由于您的ng-show为false，angular应用了ng-hide类，它将隐藏元素，因为它与show相反，如果ng-show为true，它将删除该类。

此外，您也不需要使用大括号(插值)和预定义的角度JS指令，如ng-show、ng-hide、ng-if、ng-repeat。Angular本身就知道您传递给这些指令的内容

Answer 3

当您刷新页面时，您将重置应用程序，因此您将执行以下操作：

$scope.visivel = false;

使div不可见..