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

Question

请运行这个plunker，如果你在modal中输入一个值，然后点击显示值，这个值在$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 中输入的字段在控制器中未定义

Angular UI: field entered in Modal is undefined in controller

angularjs

angular-ui-bootstrap