Question

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

HTML CODE

    <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'
    }
});

我尝试将此指令添加到服务中的infowindow：

控制器代码

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()"无效的问题，但显示其他角度指令，如{{place.info.title}}（interpolution指令），ng-hide等，效果很好！

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

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

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

Answer 1

使用已编译的元素compiled[0]代替compiled[0].innerHtml。只有绑定innerHtml可能会损失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]));

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

Answer 2

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

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

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

ng-click inside指令不使用infowindow

2 个答案: