isolated-nested scope

by gvlax

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-app = "app">    
 <div ng-controller="mainCtrl">    
     
    <a ng-click="showModalDlg()">Click me</a>
    <br/><br/>
    
    <modal-dialog show="showModal" action="actionFun">                        
        <form>
          <input type="radio" ng-model="radioVal" value="1">One<br/>
          <input type="radio" ng-model="radioVal" value="nothing changes me">Two<br/>
          <input type="radio" ng-model="radioVal" value="3">Three<br/>
              <br/>
              <br/>
              The model changes in the DOM as expected: <b>radioVal = {{radioVal | json}}</b>
              <br/>
              but by pressing the Action button you can see that the model has not been modified. 
        </form>                        
		<a class="button" action>Action</a>                     
    </modal-dialog>             
 </div>
</div>

CSS

.button {
    border: 1px solid #AAA;
    margin: 10px;
    width: 100px;
    display: block;
    text-align: center;
}

JavaScript

angular.module('common', [])
    .controller('mainCtrl', ['$scope', function($scope){
        $scope.showModal = false;
        $scope.radioVal = "nothing changes me";
        $scope.showModalDlg = function() {
            $scope.showModal = !$scope.showModal;
        };
        $scope.actionFun = function() {
            console.log('actionFun ...' + $scope.radioVal);
        };        
    }]).directive('modalDialog',
		function () {
			return {
				restrict: 'E',
				scope: {
					show: '=',
					action: '&',
				},
				replace: true,
				transclude: true,
				link: function (scope, element, attrs) {
                    scope.hideModal = function () {
						scope.show = false;
						scope.$apply();
					};
					
					$('a[hide]', element).on('click', function(){
						scope.hideModal();
					});

					$('a[action]', element).on('click', function(){
                        console.log('There is no radioVal in isolated scope either ... ' + scope.radioVal);
						scope.action()();
						scope.hideModal();
					});
				},
				template: '<div class=\'ng-modal\' ng-show=\'show\'><div class=\'ng-modal-overlay\'></div><div class=\'ng-modal-dialog\' ng-style=\'dialogStyle\'><div class=\'ng-modal-dialog-content\' ng-transclude></div></div></div>'
			}
		});

angular.module('app', ['common'])