Question

我一直在寻找问题的解决方案，我认为应该相对容易解决 - 使用Angular.js的双向数据绑定

我有一个模态对话框（使用Angular ui-bootstrap代码进行模态对话），我想从中输入文本并输出到主应用程序页面，我有一个工作Plunker（它适用于数据绑定，因为我可以看到模态对话框中的输入值），但是我想要获取该值并将其绑定到Projects

下的部分。

我的HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">Add Project</h3>
            </div>
            <div class="modal-body">
                Project Name: <input type="text" ng-model="name"></input>
            {{name}}
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>

        In Modal: {{ name }}
        </script>

        <button class="btn btn-default" ng-click="open()">Add Project</button>
    </div>

<div class="col-lg-6">
                    <div class="table-responsive" ng-model="name">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Project</th>
                                    <th>Badges</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{$scope.name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
        </div> 
  </body>
</html>

我的javascript

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.name = "";

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
                projName: function () {
                    return $scope.name;
                }
            }
        });

        modalInstance.result.then(function (pName) {
            $scope.name = pName;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, projName) {

    $scope.name = projName;

    $scope.ok = function () {
        $modalInstance.close($scope.name);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

非常感谢提前

Answer 1

由于主应用程序页面由ModalDemoCtrl控制器操作而模型由ModalInstanceCtrl控制器操作，因此它们不能使用彼此的范围变量，这些控制器没有任何关系。

使用$ model service的resolve方法，只有这样才能将ModalDemoCtrl范围变量数据传递给ModalInstanceCtrl。

resolve:{items: function () {return $scope.items;}

和ModalInstanceCtrl使用$ modalInstance.close（modeldata）将数据扩展到ModalDemoCtrl，你做了。

所以如果你想将模态输入传递给主应用程序。使用它如下...

在ModalInstanceCtrl

中

$scope.ok = function () {
    $modalInstance.close($scope.name);
  };

在ModalDemoCtrl

中

modalInstance.result.then(function (nameFromModal) {
      $scope.name = nameFromModal;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

将Modal Dialog中的数据绑定到Web应用程序的另一个区域

1 个答案:

在ModalInstanceCtrl

在ModalDemoCtrl