无法访问角度UI模式对话框的模型值

Question

我对角度世界（第二天）非常陌生，并尝试解决角度UI问题。我正在尝试构建我的第一个模态对话框。 模态对话框正在正确显示，但我不能在该模式对话框中使用模型。 这是我demo 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> 

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

在控制器modalCtrl

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之间的沟通？ 对于这个通信我试图用的事件概念如下：

在modalCtrl：

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

但这也不能正常工作。 我究竟做错了什么。我是否以错误的方式创建角模态？ 任何帮助对我来说都很棒。 在此先感谢。

Answer 1

我认为这是一个原型继承问题，与角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表明，存在于$$childTail范围testModel对象，这意味着该模式创造了一个新的子$scope本身，并结合testModel到$scope。解决方法是使用ng-model="$parent.testModel"来引用父代$scope（正确的范围，我们为模态定义的范围）。

Working plunk。

Answer 2

它看起来像你有一个范围问题。换句话说，您的模型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

UPDATE：

现在，你想使用$emit的两个控制器之间的通信方式。要解决你的代码，你只需要到指定parent scope在创建modal，所以你只需要更新您的代码是这样的：

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

Working demo for update