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

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

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

在控制器中：

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

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

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

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

在index.html中：

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

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

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

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

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

我还想知道，是否可以在DemoCtrl和modalCtrl之间进行通信？ 对于这次交流，我尝试使用事件的概念，如下所示：

在modalCtrl中：

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

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

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

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

在DemoCtrl中：

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

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

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

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

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

---

提前感谢。

我认为这是angular ui引导模式出现的典型继承问题。我不能说我知道造成这种情况的确切原因（除了与$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');
    };
});

编辑：

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

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

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

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

检查模态的

$scope

显示

testModel

对象存在于

$$childTail

作用域上，这意味着模态已经为自己创建了一个新的子

$scope

，并将

testModel

绑定到该

$scope

。解决方法是使用

ng model=“$parent.testModel”

引用父级

$scope

（正确的范围，我们为模式定义的范围）

---

.

看起来您遇到了范围问题。换句话说，您的模型

testModel

是在不同的范围内创建的，即

子范围

。因此，要解决问题，只需使用附加到模态范围的对象，而不是变量：

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

检查更新的

更新：

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

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

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

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

现在，您需要一种使用在两个控制器之间进行通信的方法。要修复代码，只需在创建

模式

时指定

父范围

，因此只需如下更新代码：

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

---

您能否在JSFIDLE/plunk示例中收集您的代码这是我创建的plunk：请检查此plunk：根据您的解决方案，值将始终保持空字符串“”您还可以帮助我了解控制器间的通信。。。我创造了这样一个劫掠者：@SaurabhLprocks我想埃布拉姆·塔瓦回答了你的问题？虽然我通常使用服务而不是

$emit

。耶！现在可以工作了。。你能告诉我两个控制器之间的通信方式吗。请看这个plunker：