Angular UI Bootstrap Modales Update $ scope

Question

Ich möchte das Modal verwenden, um meine Daten zu bearbeiten. Ich übergebe die Daten an die modale Instanz. Wenn ich ok klicke, übergebe ich die bearbeiteten Daten in $ scope.selected zurück an den Controller.

Dort würde ich gerne den ursprünglichen $ scope updaten. Irgendwie wird der $ scope nicht aktualisiert. Was mache ich falsch?

var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.data = { name: '', serial: '' } 

    $scope.edit = function (theIndex) { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
     items: function() { 
      return $scope.data[theIndex]; 
     } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 

     // this is where the data gets updated, but doesn't do it 
     $scope.data.name = $scope.selected.name; 
     $scope.data.serial = $scope.selected.serial; 

    }); 
    }; 
}; 

Modal Controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 

    $scope.items = items; 
    $scope.selected = { 
    name: $scope.items.name, 
    serial: $scope.items.serial 
    }; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}; 

Modal:

<div class="modal-header"> 
    <h3>{{ name }}</h3> 
</div> 
<div class="modal-body"> 
    <input type="text" value="{{ serial }}"> 
    <input type="text" value="{{ name }}"> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Answer 1

Sie sind nicht die Vorlage für die modal, so ist dies ein bisschen eine Vermutung. Ihr Code ist dem Beispielcode für das angular-ui-Modal ziemlich ähnlich, der ng-repeat in der Vorlage verwendet. Wenn Sie dasselbe tun, sollten Sie beachten, dass ng-repeat einen untergeordneten Bereich erstellt, der von dem übergeordneten Bereich erbt.

von diesem Snippet zu urteilen:

$scope.ok = function() { 
    $modalInstance.close($scope.selected); 
}; 

es sieht so aus, anstatt dies zu tun in der Vorlage:

<li ng-repeat="item in items"> 
    <a ng-click="selected.item = item">{{ item }}</a> 
</li> 

Sie so etwas wie dies tun kann:

<li ng-repeat="item in items"> 
    <a ng-click="selected = item">{{ item }}</a> 
</li> 

Wenn In Ihrem Fall weisen Sie also selected dem untergeordneten Bereich zu, was sich nicht auf den Benutzer auswirkt Die Eigenschaft des übergeordneten Bereichs ist selected. Wenn Sie dann versuchen, auf $scope.selected.name zuzugreifen, wird es leer sein. Im Allgemeinen sollten Sie Objekte für Ihre Modelle verwenden und Eigenschaften für sie festlegen, und keine neuen Werte direkt zuweisen.

This part of the documentation erklärt das Scope-Problem im Detail.

Edit:

Sie sind auch Ihre Eingaben zu jedem Modell überhaupt nicht verbindlich, so dass die von Ihnen eingegebenen Daten werden nie irgendwo gespeichert. Sie müssen ng-model verwenden, das zu tun, z.B .:

<input type="text" ng-model="editable.serial" /> 
<input type="text" ng-model="editable.name" /> 

this plunkr für ein Arbeits Beispiel.