Ionic Js / Angular JS - Get an element inside a modal and set value

Question

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>

After some researching i've find that this could be possibile 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;
});

To let this data talk between my controllers i did this:

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

If i've forget anything please accept my apologies, i'm really new to ionic/angularJs.

hi my friend, sorry for the late! unfortunately no, the project has been paused temporarily, but your suggestions seems very interesting, i hope to watch for it in these days, anyway thank you so much! — Luca Mormile
– Luca Mormile, Commented Oct 5, 2015 at 17:08
No worries mate. I can understand we're all busy. Let me know how it goes. Saluti. Ciao. — LeftyX
– LeftyX, Commented Oct 5, 2015 at 17:12

LeftyX · Accepted Answer · 2015-10-03 10:33:48Z

You really don't need to broadcast events if you want to communicate with a modal. Modals can live in the view which calls them so they share the same scope.

Is there any particular reason why you're using data-value="1" and jQuery to pass around data?

angular gives has got this binding features which allow you to bind items/objects/values to every element in the DOM:

app.controller('mainCtrl', function($scope){
    $scope.myValue = "this is a value";
    $scope.myObject = {name: 'Luca'};
    };
}

which you can bind to a textbox using double-binding with ng-model:

<input type="text" ng-model="myValue">
<input type="text" ng-model="myObject.name">

or single-binding:

<input type="text" value="{{myValue}}">
<input type="text" value="{{myObject.name}}">

with the double-binding the object in the $scope will be kept in sync, which means you will always be able to read the updated value.

Going back to your modal. Modals are created inside a controller so they technically can share the same scope.

You would do something like this to create a modal:

  $ionicModal.fromTemplateUrl('myModal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

when the promise is resolved (.then()) the created modal is saved in the $scope so that it can be opened later simply calling openModal:

  $scope.openModal = function() {
    $scope.modal.show();
  };

As I said views and modals can share the same scope so your modal could look something like this:

<ion-modal-view>
    <ion-header-bar>
      <h1 class="title">I am a modal</h1>
    </ion-header-bar>
    <ion-content>
      {{myObject.name}}
    </ion-content>
</ion-modal-view>

and show the value you have set in your textbox previousely:

<input type="text" ng-model="myObject.name">

which would be updated instantly.

You can check this plunker. You can set the modal's title and body. When opening the modal with the button, your new modal will show the values you've inserted in the views.

Collectives™ on Stack Overflow

Ionic Js / Angular JS - Get an element inside a modal and set value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related