Angular UI Bootstrap modal inside ngRepeat

Question

I am creating an application where I have many input fields. These input fields are generated from the field of an array of JSON objects using the AngularJS ngRepeat directive and have a button next to them that opens the Angular UI Bootstrap modal to edit this value in a larger text field. I cannot figure out how to bind this property of the model to Angular UI Bootstrap so that I can save the changes made in modal. Since this function is needed in many representations, I turned it into a service.

I have made a plunker to illustrate my problem. 

http://plnkr.co/edit/ZrydC5UExqEPvVg7PXSq?p=preview

Currently, in the example with the plunker, the modal contains a text field, but I really need to use the Text-Angular directive, because these fields contain some HTML markup, and it will be easier for me to change the values ​​using this nice add-on.

Textangular

EDIT: Please, if you took the time to answer, you could spend a little time editing my plunker example to show exactly what your solution would look like, because it seems like everyone trying to help me think that they know the solution, but actually it doesn’t work :( Thanks!

Answer 1

I personally would like to decorate my $ scope with services (i.e. $ scope.modalService = ModalService;), so I understand the source of the logic. In ng-repeat, you then pass the value element to a method call:

 <div class="input-group"> <input class="form-control" ng-model="value.value"> <span class="input-group-addon" ng-click="modalService.openTextEditModal(value)"> <span class="glyphicon glyphicon-align-justify"></span> </span> </div> 

The modal service and the modal template will refer to the object, in this case, clone the object, which will help with state management, and not the text:

 app.factory('ModalService', function($modal) { return { openTextEditModal: function(item) { var modalInstance = $modal.open({ templateUrl: 'modal.html', backdrop: 'static', controller: function($scope, $modalInstance, $sce, item) { var clone = {}; angular.copy(item, clone); $scope.clone = clone; $scope.close = function() { $modalInstance.dismiss('cancel'); }; $scope.save = function() { angular.extend(item, clone); $modalInstance.close(); }; }, size: 'lg', resolve: { item: function() { return item; } } }); } }; }); 

When changing the corresponding modal template:

 <div class="modal-header"> <h3 class="modal-title">Edit text</h3> </div> <div class="modal-body"> <textarea class="form-control" ng-model="clone.value"></textarea> </div> <div class="modal-body"> <button class="btn btn-warning" ng-click="close()">Close</button> <button class="btn btn-success pull-right" ng-click="save()">Save</button> </div> 

Answer 2

It may be easier to create a controller for your modal and transfer the objects you need from your area. They will be passed by reference, so changes to them will update the scope of your parent scope. Something like this in your MainCtrl:

  var modalInstance = ModalService.open({ templateUrl: 'modal.html', controller: 'YourModalController', size: 'lg', resolve: { text: function () { return $scope.editText; } } }); modalInstance.result.then(function () { }); 

And then in your modal controller:

 app.controller('YourModalController', ['$scope', '$modalInstance', 'text', function YourModalController($scope, $modalInstance, text) { $scope.text = text; $scope.close = function() { $modalInstance.dismiss('cancel'); }; $scope.save = function() { $modalInstance.close($scope.text); }; }]); 

And if you want it to be reused, so you don’t need to duplicate the code of the modal instance in the parent controller, you can do this directive.

Answer 3

You can return a promise and then process the success callback in the controller.

In the openTextEditModal function return modalInstance.result; .

Then in the controller you can do this:

 $scope.editText = function(text){ ModalService.openTextEditModal(text).then(function(newText){ console.log(newText); $scope.text = newText; // do something with the new text }); };