AngularJS: Eingangsreinigung funktioniert nicht im Zustand

Ich habe ein Problem. Ich habe eine Funktion geschrieben, die Eingaben per Knopfdruck löscht, aber es funktioniert nicht, wenn ich $ stateProvider verwende und die Reinigung im Status implementiert ist.AngularJS: Eingangsreinigung funktioniert nicht im Zustand

app.js:

<script> 
    var app = angular.module("app", ['ui.router']); 
    app.config(function($stateProvider, $urlRouterProvider){ 

     $urlRouterProvider.otherwise("/first"); 

     $stateProvider 
     .state("first", { 
      url: "/first", 
      templateUrl: "first.html" 
     }) 
     .state("second", { 
      url: "/second", 
      templateUrl: "second.html" 
     }); 

    }); 

    app.controller("ctrl", function($scope){ 

     $scope.searchAll = ""; 

     $scope.clearSearch = function() { 
      $scope.searchAll = ""; 
     }; 
    }); 
</script>

Seite:

<body ng-controller = "ctrl"> 
<div class = "container" > 

    <button type="button" class="btn btn-success"><a ng-href="#/first">First</a></button> 
    <button type="button" class="btn btn-success"><a ng-href="#/second">Second</a></button> 
    <br> 
    <ui-view><ui-view> 
</div> 
</body>

Staat zuerst:

FIRST SIDE!!!!! 
<input type="text" class="form-control" ng-model="searchAll"></input> 
<a href="" data-ng-click="clearSearch()">X</a>

Staats Sekunde:

SECOND SIDE!!!!

Quelle

2016-08-22 Luq

Warum machst du das ??? Es ist so einfach, warum benutzt du das im Zustand? –

Ich muss Seiten ohne Aktualisierung ändern und eine dieser Seiten enthält Eingaben, die mit der Schaltfläche gelöscht werden müssen. Es ist einfach, aber funktioniert nicht. – Luq

Ich bin nicht 100% sicher von Ihrer Beschreibung, aber bei einer Schätzung werden die Attribute in Ihren Zustandsvorlagen nicht an den $ Bereich Ihres Controllers gebunden, da sie nicht zu dem Zeitpunkt vorhanden sind, wenn Ihr vollständiger Seitencontroller instanziiert wird.

Also, ein paar Dinge:

Sie sind besser dran, einen separaten Controller für jede der ui-Ansichten, die eher als einen einzelnen Controller für die volle Seite hat, auf diese Weise wird die Steuerung an den einzelnen Staat gebunden Vorlage, wenn Sie in diesen Zustand wechseln.

$stateProvider 
    .state("first", { 
     url: "/first", 
     templateUrl: "first.html", 
     controller: 'FirstCtrl as first' 
    })

Anstatt eine leere href für die Löschtaste hat den Browser kann dazu führen, aktualisiert, wenn Sie ein e.preventDefault() hinzufügen; Für das Click-Ereignis ist es einfacher, ein Span- oder Div-Tag zu verwenden.

Verwenden Sie Ui-Srefs für die Links zu jedem Zustand statt ng-href, z.

<a ui-sref="first">First</a>

Schließlich ist es eine gute Zeit mit $ Umfang zu stoppen, wie es in Angular 2 verschwindet, und ist nicht mehr best practice in Angular 1. * apps - Verwendung Controller als Syntax statt - https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Sehen Sie Ihren Code mit den obigen Änderungen um https://plnkr.co/edit/3yStlPEozNGM886nEoXg?p=preview - und deaktivieren Sie die Schaltfläche funktioniert wie erwartet

Quelle

2016-08-22 10:05:44 glendaviesnz

Ok. Vielen Dank, aber zwei Controller geben mir ein anderes Problem. Wie kann ich Variablen zwischen diesen beiden Controllern übertragen? Sollte ich localStorage oder etwas anderes verwenden? – Luq

Der beste Weg, es zu tun wäre, einen Service, wahrscheinlich zu viel für dieses kleine Beispiel zu haben, aber das ist, was am besten skaliert - wird dies zu den Plunkr hinzufügen, wird aber bis morgen nicht Zeit haben, tut mir leid. – glendaviesnz

Ich habe dem Plunkr einen Basisdienst hinzugefügt, um zu zeigen, wie man Daten zwischen Controllern austauschen kann. Sie sollten versuchen, die Controller auf eine einzelne Ansicht zu konzentrieren und wiederverwendbare Logik und Daten zu Services zu verschieben. – glendaviesnz

AngularJS: Eingangsreinigung funktioniert nicht im Zustand

Antwort

Verwandte Themen