1

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

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 的那个会显示出来，但是在显示后它不会隐藏可折叠。（即一个按钮显示“添加新用户”，然后页面展开并显示一个表单，在用户完成表单的工作后，表单折叠回来并向用户显示一条消息。

提前致谢。

4

1 回答 1

3

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

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

你也可以看看ui-hide, ui-showand ui-toggle(from AngularUI，但我认为我们可能应该添加一张票来让你自定义使用的类。

尝试摆脱手动进行 DOM 操作的心态。这需要一段时间，但一旦你习惯了它，你的开发速度就会呈指数级增长。当您最终遇到 Angular 无法为您完成这项工作的墙时，请开始阅读指令并查看 AngularUI 的源代码以获取一些好的注释示例。

于 2013-01-09T00:19:50.193 回答