无法访问 angular ui 模态对话框的模型值 [英] Unable to access model values for the angular ui modal dialog

问题描述

我对 angular 世界(第二天)非常陌生，并试图解决 angular ui.我正在尝试构建我的第一个模态对话框.模态对话框显示正确，但我无法在该模态对话框中使用模型.这是我的 demo plunker

这是我到目前为止所做的:

在控制器中:

appRoot.controller('DemoCtrl', function ($scope, $modal) {$scope.openDemoModal= 函数(大小){var modalInstance = $modal.open({templateUrl: 'ngPartials/_DemoModal.html',控制器:'modalCtrl'，尺寸:尺寸，背景:真实，键盘:真的，modalFade: 真});};});

在 index.html 中:

<a ng-click="openDemoModal()">打开模态</a>

在_DemoModal.html

<h3 class="modal-title">测试模态</h3>
<div class="modal-body"><输入 ng-model="testModel"/>

<div class="modal-footer"><button ng-click="test()">Test</button><button ng-click="cancel()">取消</button>

在控制器模态Ctrl

appRoot.controller('modalCtrl', function ($scope, $modalInstance) {$scope.test=函数(){var temp = $scope.testModel;//这里显示undefined};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};});

In modal Ctrl $scope.testModel 始终保持未定义状态，无论文本框中是什么.如果我首先设置 $scope.testModel="some value" 的值，无论文本框中是什么，它都不会改变.我到底做错了什么.

我也想知道，DemoCtrl 和 modalCtrl 之间是否可以进行通信?对于这次交流，我尝试使用事件的概念如下:

在模态Ctrl中:

 $scope.test= function () {//var temp = $scope.testModel;//显示未定义$scope.$emit('someEvent', 'some args');};

在演示控件中:

$scope.$on('someEvent', function (event, args) {alert('事件调用');});

但这也不起作用.我到底做错了什么.我是否以错误的方式创建角度模态?任何帮助对我来说都会很棒.提前致谢.

解决方案

我认为这是一个原型继承问题，发生在 angular ui bootstrap modal 中.我不能说我知道这个的确切原因(除了与 $scope 相关)，但我以前遇到过很多次，我的解决方法是尽快在模态控制器的范围内定义主模型对象已创建，基本试试这个；

appRoot.controller('modalCtrl', function ($scope, $modalInstance) {//在控制器上显式声明模型而不是在视图上隐式声明$scope.testModel="";$scope.test=函数(){var temp = $scope.testModel;//这里显示undefined};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};});

检查模态的 $scope 显示 testModel 对象存在于 $$childTail 范围内，这意味着模态已经创建了一个新子 $scope 自己，并将 testModel 绑定到该 $scope.一种解决方法是使用 ng-model="$parent.testModel" 来引用父 $scope(正确的范围，我们为模态定义的范围).

工作狂.

I am very new to the angular world (second day) and trying to work around angular ui. I am trying to build my first modal dialog. The modal dialog is being shown properly but I m not able to use model in that modal dialog. Here is my demo plunker

Here is what I've done so far:

In controller:

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
        });
    };
});

In 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>

In controller modalCtrl

appRoot.controller('modalCtrl', function ($scope, $modalInstance) {

    $scope.test= function () {
        var temp = $scope.testModel;//This shows undefined
    };

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

In modalCtrl $scope.testModel always remains undefined no mater what is in the text box. And if I first set the value of $scope.testModel="some value", it will never change no matter what is in the text box. What exactly wrong I am doing.

Also I want to know, if is it possible to have communication between DemoCtrl and modalCtrl ? For this communication I tried to use concept of events as follows:

In modalCtrl:

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

In DemoCtrl:

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

But this is also not working. What exactly I am doing wrong. Is I am creating angular modal in a wrong way? Any help will be great for me. Thanks in advance.

解决方案

I think this is a prototypical inheritance issue that occurs with teh angular ui bootstrap modal. I can't say I know the exact cause of this (Other than it being $scope related) but I've encountered this many times before and my workaround is to define the main model object on the scope of the modal controller as soon it is created, basically try this;

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');
    };
});

EDIT:

Examining the $scope of the modal shows that the testModel object exists on the $$childTail scope, meaning the modal has created a new child $scope for itself, and is binding testModel to that $scope. A workaround is to use ng-model="$parent.testModel" to reference the parent $scope (the correct scope, the one we defined for the modal).

Working plunk.

这篇关于无法访问 angular ui 模态对话框的模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！