Add button dynamically


#1

How can I dynamically add a button to a view and tell him properly which function to call on callback.
I am using leaflet.js to display markers on maps. When the user taps a marker, a popup displays. In the popup I want to have a button for further event…

My current implementation seems not to work:

'<button locationName="'+location.name+'" class="icon-left ion-information" ng-click="stationInfoButtonClick('+location.name+')"></button>&nbsp;&nbsp;&nbsp;'+location.name,

and

  $scope.stationInfoButtonClick = function(stationName){
      console.log(stationName);
  };

Makers are set like this:

$scope.map.markers[i] = {
	    	      	lat:location.lat,
	    	      	lng:location.lng,
	    	      	message: '<button class="icon-left ion-information" ng-click="stationInfoButtonClick('+location.name+')"></button>&nbsp;&nbsp;&nbsp;'+location.name,
//	    	      	focus: true,
	    	      	draggable: false
	    	      };

#2

you can use ng-if to show button and hide button

    $scope.showButton = function(){
      $scope.buttonShow = true;
  };

html:

<button ng-if="buttonShow"></button>

#3

Ok, more context: I am using leaflet.js to display markers on maps. When the user taps a marker, a popup displays. In the popup I want to have a button for further event…

Makers are set like this:

$scope.map.markers[i] = {
	    	      	lat:location.lat,
	    	      	lng:location.lng,
	    	      	message: '<button class="icon-left ion-information" ng-click="stationInfoButtonClick('+location.name+')"></button>&nbsp;&nbsp;&nbsp;'+location.name,
//	    	      	focus: true,
	    	      	draggable: false
	    	      };