Compile Popup Msg ng-click w/ Controller As syntax

[dkromp]

I am using Controller As syntax and am trying to get the popup to compile my html message using the settings below. Controller 'X' is known as dep in the html, and the alert function is defined in the controller as such.

vm.alert= function() {
    alert('hi');
 }

vm.mapMarkers.push({
   lat : 40.703289,
   lng : -74.014192,
   message : "<div ng-click=\"dep.alert()\">howdy</div>",
   compileMessage : true,
   getMessageScope : function() { return vm; },
   layer : 'vehicles'
})

It throws this error Uncaught TypeError: c.$apply is not a function.

I am using packages: "angular": "^1.4.7", "angular-leaflet-directive": "^0.9.0", "leaflet": "^0.7.7"

Any ideas?

[tombatossals]

Please, could you provide a jsfiddle showing this behaviour? You could use this jsfiddle as a starting point:

http://jsfiddle.net/maistho/9jymzymu/

I'm actually reworking all the code to make it compatible with Leaflet 1.0 and start the compatibility with Angular 2.0, but I can take a look at your problem if it's a bug generic enough.

I'm closing the issue, but will reopen if you provide the jsfiddle. Thanks

[dkromp]

The example jsfiddle isn't showing any markers.

[dkromp]

Here is the jsfiddle as requested, http://jsfiddle.net/bz5s7ybm/2/

Please reopen this issue and advise.

Thanks so much for your help, Dan

[tombatossals]

Great, maybe @davidovich could help you, since he was the dev who coded this functionality.

I could take a look at it when I finish all the reestructuration of the code.

[davidovich]

The example works though, and it is almost the same use case:

Please verify that you are using validated versions of leaflet and angular-leaftlet-directive.

[tombatossals]

@davidovich , seems the problem is related with using the controller with the "controller as" syntax introduced in angular 1.2. Old syntax is working perfectly as you say.

[dkromp]

I updated the fiddle with the following dependencies.

I am using packages: "angular": "^1.4.7", "angular-leaflet-directive": "^0.9.0", "leaflet": "^0.7.7"

Without controller as syntax (working) http://jsfiddle.net/bz5s7ybm/21/

With controller as syntax http://jsfiddle.net/bz5s7ybm/22/

[davidovich]

I have not understood everything that is going on, but it works if you return the $scope in getMessageScope():

http://jsfiddle.net/bz5s7ybm/25/

I got my inspiration from:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

[tombatossals]

Great solution @davidovich, closing the issue as it's solved now.

[dkromp]

good work! thx guys!!!!!!

[dkromp]

What if the marker is being created in a factory service? The $scope passed into the service doesn't handle the same as in the controller example on jsfiddle.

[tombatossals]

Please, can you provide another jsfiddle with this new behaviour?

[dkromp]

Here is an example using a factory service and Controller As syntax. Thx in advance for taking a look.

http://jsfiddle.net/bz5s7ybm/28/

[j-r-t]

Not sure if this is the correct way of doing things but why not just pass your scope to the service?

http://jsfiddle.net/4fe4z12y/

[dkromp]

No, that does not work. When clicking on the ngClick marker, alert dialog should show -- it does not in your updated fiddle.

[davidovich]

@jessertaylor is right, this does work. there is no magic here, you need to pass the scope.

here is a small variant (only using scope in the make function) http://jsfiddle.net/bz5s7ybm/33/

@tombatossals I think this is safe to close, @dkromp has evidently not investigated this thoroughly enough.

[dkromp]

Excellent! Great work.

[tombatossals]

Thanks @jessertaylor @davidovich , you are great guys.