Angular prevent() verursacht unerwünschte Unschärfe/verdaut

Question

Alle,

In meinem Angular (1.5.9) SPA, habe ich ein Modell, bei dem der Benutzer aus einer Dropdown-Liste auswählt und ein Element dargestellt wird, basierend auf der Auswahl sie machen. Dies funktioniert, wenn der Benutzer jedoch mit dem gerenderten Element (einem Eingabefeld) interagiert, führt eckle einen Digest durch und das Element verwischt - aufgrund des erneuten Renderns nehme ich an.

Dies geschieht in einem Bootstrap-modalen Fenster, und seltsamerweise ich nicht auf dieses Problem in einem anderen Teil meiner Anwendung, wo etwas ähnliches passiert. Ich werde die Ansicht unten zur Verfügung stellen.

Mit Batarang kann ich sehen, dass ein Digest auftritt, wenn ich auf eine Eingabe fokussiere, aber ich kann nicht erklären warum.

<div class="btn-group" uib-dropdown> 
    <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle> 
         Select Field <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" uib-dropdown-menu> 
     <li ng-show="!field.bolIsPrimaryKey" 
      ng-repeat="field in fields()"> 
     <a href="#" ng-click="displayColumn(field, $event)">  
      {{field.strColumnAlias}} 
     </a> 
     </li> 
    </ul> 
</div> 
<hr /> 
<div ng-repeat="field in fields() track by $index"> 
    <div ng-show="field.visible"> 
    <!-- free text field --> 
    <div ng-if="field.objDataType == 0"> 
     <input type="text" class="form-control" name="text" ng-model="field.objNewRowValue" required> 
    </div> 
    </div> 
</div> 

Ich habe festgestellt, dass der Fokus zu halten, um während der Eingabe der Interaktion, ich brauche Mausklick nach unten zu halten, und geben Sie dann.

aktualisieren

Ich habe festgestellt, dass mein Problem liegt Onclick in $event in meinen Knopf im Vorbeigehen und $event.preventDefault(); in der Funktion aufrufen. Wenn ich das Dropdown-Feld lösche und einfach jedes Objekt im Array innerhalb der Ansicht anzeigen würde, stößt ich nicht auf solche Probleme. Ich habe die folgende Funktion eingefügt.

Answer 1

Ich habe festgestellt, dass die Verhinderung der Weitergabe auf jeder gerenderten Eingabe das Problem behebt, das ich erlebt habe. Allerdings kann ich nicht erklären, warum das Problem dadurch behoben, aber ...

ich hinzugefügt, um diese Funktion zu meinem Controller

$scope.stopProp = function (event){ 
    event.stopPropagation(); 
} 

Und jeden gerenderte Eingang, ich meine Ansicht geändert, so zu imitieren, die folgenden

<div ng-if="field.objDataType == 0"> 
    <label> 
     {{field.strColumnAlias}} 
    </label> 
    <input type="text" ng-click="stopProp($event)" 
         class="form-control" 
         name="text" 
         ng-model="field.objNewRowValue" 
         placeholder="Please enter a {{field.strColumnAlias}}" 
         required> 
</div>