小编jun*_*qiu的帖子

如何在AngularJS中动态编译HTML片段时绑定事件处理程序

我正在使用OpenLayers和AngularJS,一切顺利,直到我开始触摸弹出功能.

我知道如何使用$compile服务使动态内容显示在弹出窗口中:

$scope.data = {
    text: "Dynamic content"
};

var template = "<div><span>{{data.text}}</span></div>";

$scope.showPopup = function() {
    var content = $compile(template)($scope);

    var lonlat = "-5694.06868525478, 6708925.0877411375";
    $timeout(function() {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            OpenLayers.LonLat.fromString(lonlat),
            null,
            content.html(),
            null,
            true
        );

        map.addPopup(popup);
    }, 0);
};
Run Code Online (Sandbox Code Playgroud)

但是我现在正在努力处理事件处理程序,如果我更改template为(注意输入和ng-click跨度之后):

var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";
Run Code Online (Sandbox Code Playgroud)

并在$scope以下位置定义事件处理程序

$scope.func = function() {
    console.log("Hello, world");
};
Run Code Online (Sandbox Code Playgroud)

但事件无法触发.我非常怀疑使用content.html()遗嘱会丢失一些有用的信息.当我尝试以下代码时:

    var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";
    var …
Run Code Online (Sandbox Code Playgroud)

jquery openlayers angularjs angularjs-compile

2
推荐指数
1
解决办法
1695
查看次数

标签 统计

angularjs ×1

angularjs-compile ×1

jquery ×1

openlayers ×1