16

次のコードがあります。

<div modal="modal.shouldBeOpen" close="close()" options="opts">
    <div class="modal-body">
        <form novalidate name="itemForm" style="margin-bottom: 0px;">

含まれているファイル modal.html に含まれているもの

<div data-ng-controller="AdminController">
   <ng-include src="'/Content/app/admin/partials/grid-subject.html'"></ng-include >
   <ng-include src="'/Content/app/admin/partials/modal.html'"></ng-include>
</div>

私の AdminController コントローラーでは、次のコードを使用してフォームを元の状態にリセットしようとしています。

$scope.itemForm.$setPristine();

これを行うと、「itemForm」が未定義であることがわかります。

フォームの内容を元の状態に設定する方法はありますか。これはスコープの問題だと思いますが、修正方法がわかりません。2番目のインクルードを削除してコードを直接貼り付けるという1つの解決策を試しました。このソリューションは機能します。

ただし、コードを再利用できるようにしたいので、modal.html のインクルードでこれを実行できるようにしたいと考えています。

これを行う理由は、modal.html に次のようなものがあるためです。

    <button
        class="btn float-right"
        data-ng-disabled="itemForm.$pristine"
        data-ng-click="modalReset()"
        data-ng-show="modal.resetButton">
        Reset</button>
</form>

したがって、実際には itemForm の内部にいて、内部のボタンから $pristine に設定したいと考えています。

4

4 に答える 4

10

この回答はすべてのルール (つまり、コントローラー内の DOM トラバーサル) に違反しますが、ここではとにかく...

.controller('AdminController', ['$scope','$element',
function($scope, $element) {
  $scope.$on('$includeContentLoaded', function() {
    var childFormController = $element.find('form').eq(0).controller('form');
    console.log(childFormController);
    childFormController.$setPristine();
  });
}]);

ng に含まれるコンテンツが読み込まれるのを待ってから、$elementAdminController が定義されている場所から要素を探しform、最初の要素を選択して、その FormController を取得します。

プランカー

ユーザー インタラクションの結果として呼び出しているだけの場合は$setPristine()、イベントを探す必要はあり$includedContentLoadedません。操作をトリガーする UI コンポーネントを作成したくなかったので、イベントを探す必要がありました。最初の実行では、フォームはまだ存在しません。

AngularJS: 親コントローラーからトランスクルードされたディレクティブ内に配置されたフォームのアクセス formControllerも参照してください。これは、親から子にアクセスしようとする同様の問題を処理します。

よりクリーンなソリューション: ディレクティブを定義し (ng-include 要素で使用)、属性として AdminController 関数を渡します。ディレクティブのリンク関数で、そのメソッドを呼び出し、FormController をパラメーターとして渡します。次に、AdminController は目的の FormController への参照を持ちます。(ng-include と一緒にディレクティブを使用する必要があるソリューションが必要かどうかわからないため、これをコーディングする必要はありませんでした。)

于 2013-07-06T17:28:13.397 に答える
4

それを行う 1 つの方法は、次のようにイベントをブロードキャストすることです。

angular.module('myApp',[])
    .controller('AdminCtrl',function($scope){
        $scope.modalReset = function(){
            $scope.$broadcast('modal-reset');
        };
    })
    .controller('ModalCtrl', function($scope){
        $scope.$on('modal-reset', function(){
            $scope.itemForm.$setPristine();
        });
    });

この方法では、dom をトラバースする必要はありません。

于 2013-07-09T13:29:36.650 に答える