ngRepeat 中的 Angular UI Bootstrap 模式

Question

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

I have made a plunker to illustrate my problem.

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

目前在 plunker 示例中，modal 包含 textarea，但我实际上需要使用 Text-Angular 指令，因为这些字段包含一些 HTML 标记，用户可以使用这个不错的插件更轻松地编辑值。

TextAngular

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

Answer 1

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

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

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

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;
                    }
                }
            });

        }
    };
});

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

<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

为您的模式制作一个控制器并从您的范围中传递您需要的对象可能会更容易。这些将通过引用传递，因此对它们的更改将更新您的父范围的范围。 MainCtrl 中的类似内容：

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

        modalInstance.result.then(function () {
        });

然后在你的模态控制器中：

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);
                    };

}]);

如果您希望它可重用，因此您不必在父控制器中复制模态实例代码，您可以将其设为指令。

Answer 3

您可以返回承诺，然后在控制器中处理成功回调。

在openTextEditModal 函数中，return modalInstance.result;。

然后，在控制器中你可以这样做：

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