angularjs - フォームの外側にある外側のクリアボタンからフォームデータを消去する方法

Question

フォームには正常に機能する送信ボタンがあります。しかし、私はページの右上のフォームの外に座っているクリアボタンからフォームデータをクリアする必要があります。クリアボタンは、親コントローラ内に存在し、フォームの右上のヘッダーにあります。クリアボタンから送信されるフォームは、常に未定義となります。これは、クリアボタンがフォームの一部ではないためです。

フォームの同じインスタンスをクリアするにはどうすればよいですか？データをクリアするにはどうすればいいですか？これが設計上の問題であれば、まだ回避策が必要です。

私はそれを模倣するために作成したフィドルです。どんな助けもありがとう。

https://jsfiddle.net/SobDan/vj67rtb2/

<div ng-app> 

<div class="col-md-10"> 
    <h2>Todo</h2></div> 
<div class="col-md-2"> 
    <button class="btn pull-right" ng-click="clear(TodoForm)"> Close</button> 

</div> 
<br> 
<div ng-controller="TodoCtrl"> 

    <form name="TodoForm" ng-submit="addTodo()" name="testForm"> 
    <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> 
    <input class="btn-primary" type="submit" value="add"> 

    </form> 

</div> 

function MainCtrl($scope) { 

$scope.clear = function(form) { 
    alert(form); // the form is undefined 
    if (form.$dirty) 
     form.setPristine(); // clean this form 
    else 
     alert("form not dirty"); 
    }; 
}; 

function TodoCtrl($scope) { 

    $scope.todoText = "test"; 
    $scope.addTodo = function() { 
    alert("Submitted"); 
    $scope.todoText = ""; 
    // submit logic works fine 
    }; 
} 

Answer 1

あなたは、コントローラではなく、範囲外であるフォームにアクセスしようとしている間の通信に$broadcastを使用する必要があります。ここで

は、すべての子$scopeにイベントをブロードキャストするために使用されfiddleと

$broadcast機能以下の説明です。興味のある子ども$scopeは、$on機能を使用してイベントを聞くために登録することができます。この機能は、コントローラ間の通信に使用されます。

あなたのケースでは、$rootScopeからclearFormというイベントをブロードキャストしてフォームをクリアするように通知します。 TodoCtrl $scopeイベントclearFormをリスンすると、フォームフィールドをクリアする信号が送られます。

app.controller("MainCtrl", function($scope, $rootScope) { 
    $scope.clear = function(form) { 
    $rootScope.$broadcast("clearForm"); 
    }; 
}); 

app.controller("TodoCtrl", function($scope) { 
    $scope.$on("clearForm", function() { 
    if ($scope.testForm.$dirty) { 
     $scope.testForm.$setPristine(); 
     $scope.todoText = ""; 
    } else { 
     alert("form not dirty"); 
    } 
    }); 
}); 

AngularJSの1.1.xの+

$scope.form.$setPristine()はAngularJSバージョン1.1.xでしか入手できません

$setPristine()は、フォームステータスを初期状態に設定するだけで、フォームフィールドはクリアされません。画面に反映される$ scope変数を無効にすることによって、手動でそれをクリアする必要があります。 +

$setPristine機能

if ($scope.testForm.$dirty) { 
    $scope.testForm.$setPristine(); 
    $scope.todoText = ""; 
} 

AngularJSの1.0.xのは、1.0.xのバージョンでは使用できません。あなたの質問で

例Fiddleあなたは単に

$scope.$on("clearForm", function() { 
     $scope.todoText = ""; 
    });