angularjs directory Link-Funktion nicht bindende Daten vom Controller

Question

Ich habe eine Direktive, die jquery Ereignisse auf den Elementparameter der Linkfunktion verwendet, diese Direktive hat einen Eingang, der an einen Wert gebunden ist, der vom Hauptcontroller von erhalten wird Die Seite, die verschachtelte Direktiven in einem isolierten Bereich durchlaufen hat, aber wenn der Wert in der Eingabe geändert wird, wird nicht im ursprünglichen Objekt vom Controller reflektiert.

Das Objekt hat die folgende Struktur: Rechnung 1: - Produkt 1 - Produkt 2 Rechnung 2: - Produkt 3 - Produkt 4

Wenn ich die Höhe des Rechnungs ändern, wird der Wert wird in der Hauptsteuerung aktualisiert, aber wenn ich die Menge des Produkts ändere, wird die Änderung nicht wiedergegeben.

Diese meine Richtlinie ist, tun, was Sie sollten, ist, dass, wenn der Benutzer klickt auf den Wert erscheint ein Eingabe den Wert des Modells in der Lage sein zu bearbeiten:

eFieldTemplate.html

<div> 
<div ng-if="IsMouseIn"> 
    <input type="text" ng-model="value" class="form-control input-sm" /> 
</div> 
<div ng-if="IsMouseOut" ng-click="OnMouseClick()"> 
    {{value}} 
</div> 
<div ng-if="MouseClick"> 
    <input type="text" ng-model="value" class="form-control input-sm" /> 
</div> 

eFieldDirective.js

angular.module("appDirectives").directive("eField", function() { 
    return { 
     restrict: "E", 
     templateUrl: "eFieldTemplate.html", 
     scope: { 
      value: "=" 
     }, 
     controller: function ($scope) { 
      $scope.IsMouseOut = true; 
      $scope.IsMouseIn = false; 
      $scope.MouseClick = false; 
      $scope.OnMouseEnter = function() { 
       if (!$scope.MouseClick) { 
        $scope.IsMouseOut = false; 
        $scope.IsMouseIn = true; 
        $scope.MouseClick = false; 
       } 
      } 

      $scope.OnMouseLeave = function() { 
       if (!$scope.MouseClick) { 
        $scope.IsMouseOut = true; 
        $scope.IsMouseIn = false; 
        $scope.MouseClick = false; 
       } 
      } 

      $scope.OnMouseClick = function() { 
        $scope.IsMouseOut = false; 
        $scope.IsMouseIn = false; 
        $scope.MouseClick = true; 
      } 

      $scope.EndEdit = function() { 
       $scope.IsMouseOut = true; 
       $scope.IsMouseIn = false; 
       $scope.MouseClick = false; 
      } 
     }, 
     link: function (scope, el, attrs) { 
      el.on("mouseenter", function() { 
       scope.OnMouseEnter(); 
       scope.$apply(); 
      }); 

      el.on("mousemove", function() { 
       scope.OnMouseEnter(); 
       scope.$apply(); 
      }); 

      el.on("mouseleave", function() { 
       scope.OnMouseLeave(); 
       scope.$apply(); 
      }); 

      el.on("click", function() { 
       scope.OnMouseClick(); 
       if (el[0].querySelector('input')) 
        el[0].querySelector('input').select(); 
       scope.$apply(); 
      }); 
     } 
    }; 
}); 

Irgendwelche Vorschläge?

Ich gebe das Beispiel hier: Plunker

AKTUALISIERT

fand ich eine Lösung ngIf verwenden und ist eine Variable aus dem übergeordneten Bereich zu referenzieren $ parent.value verwenden. Z.B.

<Input type="text" ng-model="$parent.value" class="form-control input-sm" /> 

Oder auch Bezug auf ein anderes Objekt z.

<input type="text" ng-model="value"> 
<div ng-if="IsMouseIn"> 
    <input type="text" ng-model="value"> 
</div> 

Hier ist der Referenz-Link: what is the difference between ng-if and ng-show/ng-hide

Answer 1

mit ng-wenn macht es neuen HTML-Knoten erstellen/zerstören, und es scheint nicht in der Lage zu sein, damit fertig zu werden. Wechseln Sie zu ng-show und es wird funktionieren. Ich habe auch ein Body-Maus-Capture hinzugefügt, so dass es die Bearbeitung beendet.

<div> 
<div ng-show="IsMouseIn"> 
    <input type="text" ng-model="value" class="form-control input-sm" /> 
</div> 
<div ng-show="IsMouseOut" ng-click="OnMouseClick()"> 
    {{value}} 
</div> 
<div ng-show="MouseClick"> 
    <input type="text" ng-model="value" class="form-control input-sm" /> 
</div> 

view plunker

Answer 2

Wenn Sie noch ng, wenn nicht ng-Show verwenden, definieren $scope.values und $scope.config und wie diese verwendet werden. Um das ng-if-Problem zu vermeiden, sollten Sie ein Objekt definieren.

<div> 
<div ng-if="config.IsMouseIn"> 
    <input type="text" ng-model="values.value" class="form-control input-sm" /> 
</div> 
<div ng-if="config.IsMouseOut" ng-click="OnMouseClick()"> 
    {{values.value}} 
</div> 
<div ng-if="config.MouseClick"> 
    <input type="text" ng-model="values.value" class="form-control input-sm" /> 
</div>