How to get an element and set value inside a modal still closed?


#1

Clicking on an external button i need to set a modal’s internal element value. Both elements are inside different section, so they have different controllers, i need a way to pass the button value from mainCtrl to modalCtrl.

<div id="external-element" ng-controller="mainCtrl">
    <button ng-click="getValue($event)" data-value="1">Get this value</button>
</div>

<script id="modal.html" type="text/ng-template">
    <div id="modal-section" class="modal" ng-controller="modalCtrl">
        <p class="waiting-for-button-value"></p>
    </div>
</script>

A tutorial said that i can do it by creating a service:

app.factory('dataShare',function($rootScope){
	var service = {};
	service.data = false;
	service.sendData = function(data){
		this.data = data;
		$rootScope.$broadcast('data_shared');
	};
	service.getData = function(){
		return this.data;
	};
	return service;
});

So inside my controllers:

app.controller('mainCtrl', function($scope, dataShare, $ionicModal){
    $scope.getValue = function(event){
        var myValue = $(event.target).data('value');
        dataShare.sendData(myValue);
    };
}

app.controller('modalCtrl', function($scope, dataShare){
    $scope.$on('data_shared',function(){
        var text =  dataShare.getData();
        $('.waiting-for-a-new-value').html(text);
    });
});

I need to do set my value when the modal is closed because the link with the function setValue() is in my main page, but actually this doesn’t work.

Can someone help me please?