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

ngRepeat中的Angular UI Bootstrap模式

3 个答案: