Question

我有一个简单的表单，我希望在单击按钮时显示。即一个按钮显示“添加新用户”，然后页面展开并显示一个表单，在用户完成表单工作后表单折叠并向用户显示一条消息。我面临的第一个问题是：使用此代码

function AngularUI($scope, $window) {


    $scope.collapse = function (selector) {
        angular.element(selector).collapse();
    }
}

和

<div class="ang-ui-test">
    <button ng-click="collapse('#collapsible')">
        using angular.element
    </button>

    <div id="collapsible" class="collapse">
        some thing in here ...... !
    </div>


    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
        simple collapsible
    </button>

    <div id="demo" class="collapse in">This one work properly</div>
</div>

第二个不使用angular.element.collapse正常工作。

第二个问题是：我如何测试上述行为。

在第一个按钮上按下，如果div被隐藏则使用angular.element，但是，它显示后不会隐藏折叠。（即一个按钮显示“添加新用户”，然后页面展开并显示一个表单，在用户完成表单工作后，表单将折叠回来并向用户显示一条消息。

提前谢谢。

Answer 1

你做错了。在控制器中进行DOM操作是不好的，因为你在有机会渲染/刷新/更新之前试图寻找/操纵DOM。想想控制器中的所有JS都在它自己的阶段执行，然后更新所有HTML以反映最终的模型状态。

尝试使用ng-class="{collapse:someBoolExpression}"

您还可以查看ui-hide，ui-show和ui-toggle（来自AngularUI，但我认为我们应该添加一张票，让您自定义课程使用

尝试从头脑中手动进行DOM操作。这需要一段时间，但是一旦你习惯它，你的开发速度会呈指数增长。当你最终找到Angular无法为你完成工作的墙时，请开始阅读指令并查看AngularUI的源代码以获得一些好的评论示例。

Angular-JS中div元素的单元测试崩溃行为

1 个答案: