Question

请运行此plunker，如果在模态中输入值，然后单击显示值，则$ scope中的值未定义，如何获取值？

HTML

<div ng-app="app" ng-controller="myCtl">
    <input type="button" ng-click="openModal()" value="Open Modal">

    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h4 class="modal-title">The Title</h4>
        </div>
        <form name="myForm" novalidate>
            Enter a value <input type="text" ng-model="someField" />
                </form>
        <div class="modal-footer">
            <button ng-click="showValue()">Show value</button>
        </div>
   </script>

</div>

的Javascript

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

  $scope.openModal = function() {
      $scope.modalInstance = $uibModal.open({
          animation: false,
          templateUrl: 'myModalContent.html',
          scope: $scope
        });
  };

  $scope.showValue = function() {
      alert('value entered=' + $scope.someField);
  };

});

Answer 1

你看到了这个，因为模态的scope是孤立的。即使你将$scope传递给模态。它仍然不使用相同的$scope。

对于您的示例，以下内容可行。

更新模态模板：

<button ng-click="showValue(someField)">Show value</button>

更新您的控制器showValue方法，如下所示：

 $scope.showValue = function(theValue) {
      $scope.someField = theValue;
      alert('value entered=' + $scope.someField);
  };

实际上，使用模态的最佳方法是使用open方法创建的模态实例来跟踪close和dismiss事件并以这种方式处理结果。请查看ui-bootstrap documentation

的ui-modal部分中的示例

Angular UI：在Modal中输入的字段在控制器中未定义

1 个答案: