CODEWITHSUNDEEP
angularjsgoogle-mapseventsangularjs-directiveangularjs-scope
Yuri Haichuk
Yuri Haichuk

Reputation: 73

ng-click inside directive not working with infowindow

I wrote a directive that displays information about places.

HTML CODE

    <div class="small-12 columns">
        <h1>{{place.info.title}}</h1>
    </div>
    ...
    <button class="success left" ng-click="test()">test</button>

Directive Code

app.directive('infowindow', function(){
    return {
        restrict: 'E',
        templateUrl: 'pages/infowindow.html'
    }
});

I try add this directive to infowindow in service:

Controller Code

var contentString = '<infowindow></infowindow>';
var compiled = $compile(contentString)(scope);

var test = function() {
    console.log('test clicked');
};

google.maps.event.addListener(marker, 'click', (function(marker, scope, place) {
    return function(){
        scope.place = place;
        scope.test = test;
        scope.$apply();
        infowindow.setContent(compiled[0].innerHTML);
        infowindow.open(map, marker);
    };
})(marker, scope, list[i]));

And save some variables to scope for its use in directive template.

The problem that ng-click="test()" in directive is not working, but display other angular directives like {{place.info.title}} (interpolution directive), ng-hide, etc. works fine!

If I directly add my directive as <infowindow></infowindow> on html markup all this works!

Help will be appreciated. Apologize for my bad English. Thanks.

UPD: simple example of my code in plunker http://plnkr.co/edit/jsFWXJyWo8acwP4jVQKs

Upvotes: 1

Views: 1884

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Use compiled element compiled[0] instead of compiled[0].innerHtml. Only binding innerHtml may loss two way binding of AngularJS.

CODE

google.maps.event.addListener(marker, 'click', (function(marker, scope, place) {
    return function(){
        scope.place = place;
        scope.test = test;
        scope.$apply();
        infowindow.setContent(compiled[0]); //replaced compiled[0].innerHtml with compiled object
        infowindow.open(map, marker);
    };
})(marker, scope, list[i]));

Updated plunkr with style issue resolved.

Upvotes: 2

msohns
msohns

Reputation: 101

First thing, you should not generate html code within a service or a controller. Since this will be a DOM manipulation and should only be done with a directive. As you said using <infowindow></infowindow>directly works, and that is how you should use it.

But to come back to your problem ng-click="test()" doesn't work because it is not bound to the $scope. Try changing you code to 

$scope.test = function() {
    console.log('test clicked');
};

Upvotes: 0

Related Questions