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>

angle.element.collapseを使用しない2番目のものは正しく機能します。

2番目の問題は、上記の動作をどのようにテストするかです。

最初のボタンを押すと、divが非表示の場合にangular.elementを使用するボタンが表示されますが、表示後に折りたたみ可能な要素は非表示になりません。（つまり、ボタンに[新しいユーザーの追加]と表示されている場合、ページが展開されてフォームが表示されます。ユーザーがフォームの操作を終了すると、フォームが折りたたまれてメッセージがユーザーに表示されます。

前もって感謝します。

4

1 に答える 1

3

あなたはそれを間違っています。レンダリング/更新/更新の前にDOMを検索/操作しようとしているため、コントローラーでDOM操作を行うのは悪いことです。コントローラ内のすべてのJSが独自のフェーズで実行されていると考えてください。その後、すべてのHTMLが更新され、最終的なモデルの状態が反映されます。

使ってみてくださいng-class="{collapse:someBoolExpression}"

ui-hide、、（AngularUIui-showから）も確認できますが、使用するクラスをカスタマイズできるようにチケットを追加する必要があると思います。ui-toggle

頭から手動でDOM操作を行うという考え方を身に付けてみてください。しばらく時間がかかりますが、慣れると開発速度が飛躍的に向上します。Angularがまだ仕事をこなせない壁についにぶつかったら、ディレクティブを読み始め、AngularUIのソースコードをチェックして、コメント付きの良い例を見つけてください。

于 2013-01-09T00:19:50.193 に答える