Mam kątowe zastosowanie, które wykorzystuje dyrektywy. W dyrektywie mam szablon, który definiuje mod pop-up.AngularJs nie aktualizuje modelu po zmianie danych wejściowych
Zasadniczo, jest to bardzo prosta aplikacja, która wyświetla listę książek autorów, a na liście znajduje się Edit przycisk, który otwiera oknomodalne. Jeśli otworzę modal do edycji autora książki, i po prostu go zamknę, bez edytowania autora - nie ma problemu.
Ale jeśli otworzę modal i wpisz coś na wejściu autora, i zamknij go, model utknie z bieżącą wartością wejściową przez cały czas, więc jeśli otworzę innego autora do edycji, model nie będzie być na bieżąco.
Moje pytanie brzmi: dlaczego tak się dzieje i jak to naprawić?
HTML
<div ng-controller="MyCtrl">
<table class="table table-hover">
<tr>
<td><b>Publisher</b></td>
<td><b>Edit Publisher</b></td>
</tr>
<tr ng-repeat="book in books">
<td>
{{book.Author}}
</td>
<td>
<span ng-click="toggleModal(book)" class="btn btn-primary">Edit</span>
</td>
</tr>
</table>
<modal-dialog info='modalShown' show='modalShown' width='600px' height='60%'>
<div ng-show="divBook">
<input type="text" name="bookAuthor" ng-model="bookAuthor" />
</div>
</modal-dialog>
</div>
kątowa
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", function($scope){
$scope.books = [{Author:"Jon Skeet"},{Author:"John Papa"},{Author:"Scott Hanselman"}];
$scope.modalShown = false;
$scope.toggleModal = function (book) {
$scope.bookAuthor = book.Author;
$scope.modalShown = !$scope.modalShown;
$scope.divBook = true;
};
});
myApp.directive('modalDialog', function() {
return {
restrict: 'E',
template: "<div class='ng-modal' ng-show='show'>"
+"<div class='ng-modal-overlay' ng-click='hideModal()'>"
+"</div>"
+"<div class='ng-modal-dialog' ng-style='dialogStyle'>"
+"<div class='ng-modal-close' ng-click='hideModal()'>X</div>"
+"<div class='ng-modal-dialog-content' ng-transclude>"
+"</div>"
+"</div>"
+"div>",
replace: true,
scope: {
show: '=info'
},
transclude: true,
link: function (scope, element, attrs) {
//scope.apply();
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
}
};
});
Tak, przypadek testowy będzie:
Kliknij Edycja -> zmienić wartość -> zamknięcia modalnego
Kliknij Edytuj na innego autora.
JSFiddle:http://jsfiddle.net/HB7LU/17694/