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

问题描述

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

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:

在控制器中:

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>

在_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>

在控制器模式Ctrl

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"的值，则无论文本框中的内容是什么，它都不会改变. 我到底在做什么错

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.

我还想知道， DemoCtrl 和 modalCtrl 之间是否可以进行通讯? 在本次交流中，我尝试使用事件的概念，如下所示:

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:

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

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

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.

推荐答案

我认为这是原型UI引导模态中发生的典型继承问题.我不能说我知道这个的确切原因(除了与$ scope相关)，但是我之前已经遇到过很多次了，我的解决方法是尽快在模态控制器的作用域上定义主模型对象创建后，基本上尝试一下；

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

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

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).

工友.

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