无法访问angular ui模态对话框的模型值

Unable to access model values for the angular ui modal dialog

本文关键字：对话框 模型 模态 ui 访问 angular      更新时间：2023-09-26

我对angular世界非常陌生（第二天），并试图围绕angular ui工作。我正在尝试构建我的第一个模态对话框。模式对话框显示正确，但我无法在该模式对话框中使用模型。这是我的演示plunker

以下是我迄今为止所做的：

在控制器中：

appRoot.controller('DemoCtrl', function ($scope, $modal) {
$scope.openDemoModal= function (size) {
        var modalInstance = $modal.open({
            templateUrl: 'ngPartials/_DemoModal.html',
            controller: 'modalCtrl',
            size: size,
            backdrop: true,
            keyboard: true,
            modalFade: true
        });
    };
});

在index.html:中

<div ng-controller="DemoCtrl">
  <a ng-click="openDemoModal()">Open Modal</a>
</div>

In_DemoModal.html

<div class="modal-header">
    <h3 class="modal-title">Test Modal</h3>
</div>
<div class="modal-body">
            <input ng-model="testModel"/>
</div>
<div class="modal-footer">
    <button ng-click="test()">Test</button>
    <button ng-click="cancel()">Cancel</button>
</div>

在控制器模式下控制

appRoot.controller('modalCtrl', function ($scope, $modalInstance) {
    $scope.test= function () {
        var temp = $scope.testModel;//This shows undefined
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

在modalCtrl$scope.testModel中，无论文本框中有什么内容，都始终保持未定义状态。如果我第一次设置$scope.testModel="some value"的值，那么无论文本框中有什么，它都不会改变。我到底做错了什么。

我还想知道，是否可以在DemoCtrl和modalCtrl件的概念，如下所示：

在模式中Ctrl:

 $scope.test= function () {
      //var temp = $scope.testModel;//This shows undefined
      $scope.$emit('someEvent', 'some args');
 };

在DemoCtrl:中

$scope.$on('someEvent', function (event, args) {
        alert('event called');
});

但这也不起作用。我到底做错了什么。我是不是在以错误的方式创建角度模态？任何帮助对我都很好。提前谢谢。

我认为这是一个典型的继承问题，它发生在angular ui bootstrap模态中。我不能说我知道这件事的确切原因（除了与$scope相关之外），但我以前遇到过很多次，我的解决方法是在模态控制器的作用域上定义主模型对象，基本上就是这样做；

appRoot.controller('modalCtrl', function ($scope, $modalInstance) {
    //Declare the model explicitly on the controller rather than implicitly on the view
    $scope.testModel="";
    $scope.test= function () {
        var temp = $scope.testModel;//This shows undefined
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

编辑：

检查模态的$scope表明testModel对象存在于$$childTail作用域上，这意味着模态为自己创建了一个新的子$scope，并将testModel绑定到该$scope。解决方法是使用ng-model="$parent.testModel"引用父$scope（正确的范围，即我们为模态定义的范围）。

工作砰的一声。

看起来您遇到了范围问题。换句话说，您的模型testModel是在另一个作用域child scope中创建的。因此，要解决您的问题，只需使用附加到模态范围的对象，而不是变量：

appRoot.controller('modalCtrl', function($scope, $modalInstance) {
  $scope.data = {
    testModel: ""
  };
  $scope.test = function() {
    var temp = $scope.data.testModel; //This shows undefined
    alert(temp);
  };
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
});

检查更新的plunk

更新：

现在您想要一种使用$emit在两个控制器之间进行通信的方法。要修复您的代码，您只需要在创建modal时指定parent scope，所以您只需要像这样更新您的代码：

$scope.openDemoModal = function(size) {
    var modalInstance = $modal.open({
      templateUrl: '_DemoModal.html',
      controller: 'modalCtrl',
      size: size,
      backdrop: true,
      keyboard: true,
      modalFade: true,
      scope: $scope // that's what you need to add.
    });
  };

更新的工作演示

相关文章：