current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have a problem adding a function-call to html in the AngularJS Controller.

UPDATE: Okay I have to be a little bit more concrete:

My Problem is about a leaflet popup with a button inside. The geojson data loads asynchronous and I have a "onEachFeature" function to add the popup - the function looks like: (IT'S SIMPLIFIED!)

.controller('MapCtrl', function($scope, $state) {
  function oef(feature, layer) {
    var bounds = layer.getBounds();
    var center = bounds.getCenter();

    var marker = L.marker(center).addTo(MAP);

    var popup = new L.Popup({
        autoPan: false,
        keepInView: true,
        closeButton: false,
        offset: new L.point(0, -5)
     }).setContent("<div><a ng-click='test()'>"+feature.properties.tooltip + "</a></div>");


   }

   //LOADING AND ADDING DATA TO MAP
   ....
   //END

   $scope.test = function(){
     alert("HI");
   }
});

Any ideas?

share|improve this question
    
Why do you have HTML code inside your controller and not the view? – Ben Guest 21 hours ago
    
I changed my code above - so now it should be a little bit more understandable – nrhode 17 hours ago
    
@nrhode didn't you get it working with the Angular's $compile'? – Asiel Leal Celdeiro 5 mins ago
up vote 2 down vote

You need to compile your html in order to allow angular to interpret "the angular code" in the html (See https://docs.angularjs.org/api/ng/service/$compile), otherwise it's just a simple string in the "angular world". See the sample listed below.

angular.module('myapp', [])
  .controller('foo', function($scope, $compile) {

    var div = "<div><a ng-click='hello()'>Hi</a>";
    var parent = angular.element(document.querySelector('#target')).append(div)
    $compile(parent.contents())($scope);

    $scope.hello = function() {
      console.log("'Hi div' clicked: Hi!")
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<style type="text/css">
  .hand {
    cursor: hand;
    cursor: pointer;
  }
</style>

<div ng-app="myapp">

  <div ng-controller="foo">
    <div id="target" class="hand"></div>
  </div>

</div>

share|improve this answer
up vote 0 down vote

Check this plunker :

Anchor text Ng-click example Hope this will help You

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.