0

I have a template:

var template = '<div ng-click="sayHello()">{{text}}</div>'

I compile it with my object with:

var obj = {};
obj.text = "Hello!!!";
obj.sayHello = function(){alert("hi!");};
var angularTemplate = $interpolate(template)(obj);

i add the angularTemplate to my popup. the popup shows with the correct div saying "Hello!!!" ... but when i click it nothing happens,

i also tried to interpolate it again with my scope and place the function in the scope but it doesnt work either.

JS FIDDLE (none) Working demo of what im trying

The "compiled"\"interpolated" html is then transfered to a jquery library to show the html there as a popup.

Please help.

After you guys asking me why im even using interpolate i'll show the other way i have and maybe theres an easier way to solve my problem there:

JSFIDDLE2 - Here is a closer example to the real problem

Mike
  • 741
  • 13
  • 40

1 Answers1

1

Instead of assigning a string to a variable and interpolating more angularjs way would be to create a directive so you'll get a scope and everything you need to display your view.

View

<say-hello-drv></say-hello-drv>

Directive

.directive('sayHelloDrv', function () {
  return {
     restrict: 'E',
     template: '<div ng-click="sayHello()">{{text}}</div>',
     controller: function ($scope) {
         $scope.text = 'Initial hello';
         $scope.sayHello = function () {
           $scope.text = 'Hello from sayHello()';
         }
     }
  }
}

Ref. https://docs.angularjs.org/guide/directive

Update for your use case which BTW I would replace to get your directive HTML markup with template property of DDO:

var myApp = angular.module('myApp',[])

function MyCtrl($scope, $interpolate, $compile) {

    console.log($scope)

        var template = '<eventPopup ng-click="sayHello()">{{text}}</eventPopup>';
    var objList = [{text: "Hello1"}, {text: "Hello2"}];

    $scope.sayHello = function () {
      alert('hello')
    }

    for (i = 0; i < objList.length; i++) { 
      var angularTemplate = $interpolate(template)(objList[i]);
      var interpolatedTemple = $('#abc' + i).html($compile(angularTemplate)($scope));
  }    
}

myApp.controller('MyCtrl', MyCtrl)
Chris Hermut
  • 1,708
  • 3
  • 17
  • 32
  • how would i add the popupData or the directive?.. what i have is: var message = $scope.getPopupHtml(popupData); marker.bindPopup(message); the code in question belongs to getPopupHtml – Mike Dec 13 '15 at 13:19
  • To interact with data from other scopes you have to use scope property on DDO see the referenced documentation. Also I would spend more time understanding angularjs because your code is really messy and you're not doing things properly... – Chris Hermut Dec 13 '15 at 13:28
  • its just a simplified example of a much more complicated app. trying to simplify it to the problem alone. – Mike Dec 13 '15 at 13:30
  • i uploaded another jsfiddle which is closer to the real problem. – Mike Dec 13 '15 at 13:34
  • This example is showing that your code was been written by somebody that does not know much about angularjs (manipulating DOM with jQuery which prevents angularjs from compiling the template is the most evident example) – Chris Hermut Dec 13 '15 at 13:34
  • ...im using the jquery manipulation just in the example because of the plugin im using (leaflet) receives the HTML as it is and later binds it to the popup. – Mike Dec 13 '15 at 13:36
  • See the update but I really think that you should get away from that jQuery. Have a look at template (can pass a function there or html string) / templateUrl – Chris Hermut Dec 13 '15 at 13:58