ngRepeat 中的 Angular UI Bootstrap 模式 [英] Angular UI Bootstrap modal inside ngRepeat

问题描述

我正在制作一个应用程序，其中有很多输入字段.这些输入字段是从带有 AngularJS ngRepeat 指令的 JSON 对象数组字段生成的，它们旁边有一个按钮，用于打开 Angular UI Bootstrap 模式以在更大的文本区域中编辑此值.我无法弄清楚如何将此模型属性引用到 Angular UI Bootstrap，以便我可以保存在模态中所做的更改.由于在多个视图中都需要此功能，因此我将其转换为服务.

我做了一个plunker来说明我的问题.

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

目前在 plunker 示例中，modal 包含 textarea，但我实际上需要使用 Text-Angular 指令，因为这些字段包含一些 HTML 标记，并且我会更容易让用户使用这个不错的插件编辑值.

TextAngular

拜托，如果你花时间回答，你最好多花一点时间来编辑我的plunker示例，以准确展示你的解决方案的样子，因为似乎每个试图帮助我的人都认为他们知道解决方案，但实际上它不起作用:(谢谢！

解决方案

我个人喜欢用服务来装饰我的 $scope(即 $scope.modalService = ModalService;)，所以我理解逻辑的来源.在 ng-repeat 中，然后将值项传递到方法调用中:

<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>

模态服务和模态模板然后将引用对象，在这种情况下是对象的克隆以帮助状态管理，而不是文本:

app.factory('ModalService', function($modal) {返回 {openTextEditModal:函数(项目){var modalInstance = $modal.open({templateUrl: 'modal.html',背景:'静态'，控制器:函数($scope，$modalInstance，$sce，item){var 克隆 = {};angular.copy(项目，克隆)；$scope.clone = 克隆；$scope.close = function() {$modalInstance.dismiss('cancel');};$scope.save = function() {angular.extend(项目，克隆)；$modalInstance.close();};},尺寸:'lg'，解决: {项目:函数(){归还物品;}}});}};});

随着相应模态模板的变化:

<h3 class="modal-title">编辑文本</h3>
<div class="modal-body"><textarea class="form-control" ng-model="clone.value"></textarea>

<div class="modal-body"><button class="btn btn-warning" ng-click="close()">关闭</button><button class="btn btn-success pull-right" ng-click="save()">保存</button>

I am making an app, where I have a lot of input fields. Those input fields are generated from JSON object array field with AngularJS ngRepeat directive and have a button next to them which open an Angular UI Bootstrap modal to edit this value in a bigger textarea. I cannot figure out how to reference this model property to Angular UI Bootstrap so that I can save the changes made in modal. Since this functionality is needed in multiple views, I turned it into a service.

I have made a plunker to illustrate my problem.

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

Currently in plunker example modal contains textarea, but I will actually need to use Text-Angular directive, because those fields contain some HTML markup and I would be easier for users to edit values with this nice addon.

TextAngular

EDIT: Please, if you are taking time to answer, you might aswell take a little more time to edit my plunker example to show exactly how your solution would look like, because seems that everyone who tries to help me, think they know the solution, but in reality it doesn't work :( Thanks!

解决方案

I personally like to decorate my $scope with the services (i.e. $scope.modalService = ModalService;), so I understand the source of the logic. In the ng-repeat you then pass the value item into the 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 modal template would then reference the object, in this case a clone of the object to help with state management, 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;
                    }
                }
            });

        }
    };
});

With the corresponding modal template changes:

<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>

这篇关于ngRepeat 中的 Angular UI Bootstrap 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！