Being only on my second day in the world of Angular, I am trying to navigate around Angular UI and build my first modal dialog. The modal dialog displays properly, but I'm encountering an issue with using models within it. You can view my demo on Plunker.
Here are the steps I've taken so far:
In the controller:
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
});
};
});
In index.html:
<div ng-controller="DemoCtrl">
<a ng-click="openDemoModal()">Open Modal</a>
</div>
In _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>
In controller modalCtrl
appRoot.controller('modalCtrl', function ($scope, $modalInstance) {
$scope.test = function () {
var temp = $scope.testModel; // This shows undefined
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
In modalCtrl, the $scope.testModel always remains undefined, regardless of what is in the text box. Even if I set the value of $scope.testModel="some value" initially, it won't change based on user input. What am I doing wrong?
Furthermore, I want to establish communication between DemoCtrl and modalCtrl. In an attempt to do this, I used the concept of events as shown below:
In modalCtrl:
$scope.test = function () {
//var temp = $scope.testModel; // This shows undefined
$scope.$emit('someEvent', 'some args');
};
In DemoCtrl:
$scope.$on('someEvent', function (event, args) {
alert('event called');
});
However, this method also didn't work for me. Am I approaching creating an Angular modal incorrectly? Any assistance would be greatly appreciated. Thank you.