在angular-ui模态控制器内的ng-model输入是未定义的

Question

在我的模态模板中,我试图用ng-model一个值来分配我的控制器($scope.name)的范围,但它不起作用.它给了我undefined.我究竟做错了什么？这里的人物

我希望模态创建自己的范围,并name因为我使用而放入该范围ng-model.它似乎在模态控制器内是活跃的,因为我可以使用它输出它{{name}}

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-body">
            Name: <input type="text" ng-model="name">
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
        </div>
    </script>
    <button class="btn" ng-click="open()">Open me!</button>
</div>

使用Javascript:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {    
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });
  };      
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {    
  $scope.ok = function () {
    $modalInstance.close($scope.name);
    alert('name was: ' + $scope.name)
  };    
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };      
};

Answer 1

该模型name在不同的范围内创建.使用对象:

var ModalInstanceCtrl = function ($scope, $modalInstance) {
    $scope.data = {
        name:""
    };
    $scope.ok = function () {
        alert('name was: ' + $scope.data.name);
        $modalInstance.close($scope.data.name);
    };

Plunk