無法訪問角度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