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 =＆＃34;某个值＆＃34;的值，它将永远不会改变，无论文本框中的内容是什么。我到底犯了什么错误。

另外我想知道，是否可以在 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表示testModel范围内存在$$childTail对象，这意味着模态已为自己创建了一个新的子$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

<强> 更新：

现在您想要一种使用$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

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

2 个答案: