ng-click inside 指令不适用于信息窗口

Question

我写了一个显示地点信息的指令。

HTML 代码

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

指令代码

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

我尝试将此指令添加到服务中的信息窗口：

控制器代码

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]));

并将一些变量保存到作用域中，以便在指令模板中使用。

指令中的ng-click="test()"没有生效的问题，但显示其他 angular 指令，如 {{place.info.title}}（插值指令）、ng-hide 等。工作正常！

如果我直接在 html 标记上将我的指令添加为 <infowindow></infowindow> 所有这一切都有效！

我们将不胜感激。为我糟糕的英语道歉。谢谢。

UPD: 我在 plunker 中的代码的简单示例 http://plnkr.co/edit/jsFWXJyWo8acwP4jVQKs

Answer 1

首先，您不应在服务或控制器中生成 html 代码。因为这将是一个 DOM 操作，所以只能通过指令来完成。正如您所说，直接使用 <infowindow></infowindow> 有效，这就是您应该如何使用它。

但是回到你的问题 ng-click="test()" 不起作用，因为它未绑定到 $scope。尝试将您的代码更改为

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

Answer 2

使用编译元素 compiled[0] 而不是 compiled[0].innerHtml。仅绑定 innerHtml 可能会丢失 AngularJS.

的双向绑定

代码

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]));

已更新 plunkr，样式问题已解决。

ng-click inside 指令不适用于信息窗口

ng-click inside directive not working with infowindow

angularjs

google-maps

events

angularjs-directive

angularjs-scope