angularjs -wie die Formulardaten von einem klaren Knopf außerhalb des Formulars zu löschen

Question

Ich habe ein Formular mit einem Absenden-Taste, die gut funktioniert. Allerdings muss ich die Formulardaten von einem klaren Knopf löschen, der außerhalb des Formulars oben rechts auf der Seite sitzt. Die Schaltfläche zum Löschen befindet sich in einem übergeordneten Controller und befindet sich oberhalb des Formulars in der oberen rechten Kopfzeile. Das Formular, das über die Schaltfläche "Löschen" gesendet wird, wird immer als nicht definiert angezeigt, da die Schaltfläche "Löschen" nicht Teil des Formulars ist.

Wie übergebe ich die gleiche Instanz des Formulars zu löschen? Wie lösche ich die Daten? Wenn das ein Designproblem ist, brauche ich noch eine Abhilfe.

Hier ist eine Geige, die ich erstellt habe, um das nachzuahmen. Jede Hilfe wird geschätzt.

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

Sie $broadcast verwenden sollten zwischen Steuerungen eher zu kommunizieren, als zu versuchen, das Formular zu gelangen, die außerhalb Umfang ist.

Hier ist die fiddle und die Erklärung unter

$broadcast Funktion verwendet wird $scope Ereignisse an alle Kinder zu übertragen. Jedes interessierte Kind $scope kann sich anmelden, um mit der Funktion $on auf das Ereignis zu warten. Diese Funktionalität wird verwendet, um zwischen Steuerungen zu kommunizieren.

In Ihrem Fall signalisieren wir, das Formular zu löschen, indem wir ein Ereignis namens clearForm von $rootScope aus senden. Die TodoCtrl $scope, die auf das Ereignis clearForm hört, erhält ein Signal zum Löschen von Formularfeldern.

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() ist nur von AngularJS Version 1.1.x verfügbar

$setPristine() wird nur den Formularstatus auf unberücksichtigt setzen und das Formularfeld nicht löschen. Sie müssen es manuell löschen, indem Sie die $ scope-Variablen ungültig machen, die auf dem Bildschirm angezeigt werden.

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

AngularJS 1.0.x +

$setPristine Funktion ist in 1.0.x-Version nicht zur Verfügung.

Das Beispiel Fiddle in Ihrer Frage scheinen Sie einfach die $ scope Variablen

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