Change dom element of modal onload

ionic-v1
1

i am using one modal which has header and content part.

on modal load i want to change content dynamically like i have three id’s and i m trying to put text to those id’s.

but my problem is when modal load for first time after page refresh only that time i am able to change my DOM after that it ll show as blank.

======Modal Code=======

> <script id="bluemodal.html" type="text/ng-template">
> <div class="modal">

>     <header class="bar bar-header colr">
>       <h1 class="title">Hello World</h1>
>     </header>

>     <content has-header="true" overflow-scroll="true">	
>         <div class="selectionBar back">
> 	  	<div id="gid" style="display:hidden;"></div>

> 		<div id="btype" style="display:hidden;"></div>

>                 <div id="eventName"></div>

>         </div>
>     </content>
>   </div>
> </script>

======Controller Code======

> $scope.openModalBlue = function(Ggid,btype,gname) {

> 	$('#gid').val(Ggid);
> 	$("#btype").val(btype);
>  $('#eventName').html(gname);

> 	$scope.modal.show();
>   };
2

You are mixing jQuery and AngularJS. That’s not a good idea. You need to use Angular’s two way minding to update content in the DOM instead of trying to inject content into the DOM.

Rule of thumb : If you’re using id, you’re doing it wrong.

<script id="bluemodal.html" type="text/ng-template">
<div class="modal">

    <header class="bar bar-header colr">
      <h1 class="title">Hello World</h1>
    </header>

    <content has-header="true" overflow-scroll="true">	
        <div class="selectionBar back">
	  	<div>{{data.gid}}</div>

		<div>{{data.bType</div>

        	<div id="eventName">{{data.eventName}}</div>

        </div>
    </content>
  </div>
</script>

$scope.data = {};

$scope.openModalBlue = function(Ggid,btype,gname) {
	$scope.data.gid = Ggid;
	$scope.data.btype = btype;
	$scope.data.eventName = gname
	$scope.modal.show();
};
1 Like
3

@Calendee: its exactly what i want Thanks a lot :slight_smile: