2

私はAngularJSでOpenLayersを使用しています。最終的にポップアップ機能に触れ始めるまで、すべてがうまくいきます。

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

しかし、to(入力とスパンの後にtemplate注意してください)を変更すると、イベントハンドラーに苦労していました:ng-click

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

でイベント ハンドラを定義します$scope。

$scope.func = function() {
    console.log("Hello, world");
};

しかし、イベントをトリガーすることはできません。を使用するcontent.html()と、angularjs が気にするいくつかの重要な情報が失われるとは思えません。次のコードを試したとき：

    var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";
    var content = $compile(template)($scope);
    angular.element("#footer").append(content);

このスニペットは期待どおりに完全に機能します (ここでも ng-click が機能します)。これら 2 つの使用方法の唯一の違いはcontent、 とcontent.html()です。

しかし、静的なhtmlコンテンツ文字列が期待さcontentれているため、使用できません。OpenLayers.Popup.FramedCloud

これについてのアイデアはありますか？どうもありがとうございました。

4

2 に答える 2

5

私は同じ問題に遭遇し、解決策を見つけるために3日を費やしました. 最後に、ポップアップがマップに追加された後に $compile 関数を呼び出すことが解決策であることがわかりました。このフィドルを参照してください。 Angularjs を使用した Openlayers

var template = "<div><span>{{halo}}</span><button ng-click='call()'>call</button></div>";
var popup = new OpenLayers.Popup.FramedCloud("popup", new OpenLayers.LonLat(103.83641, 1.35578), null, template, null, true);
map.addPopup(popup);
var pp = angular.element(document.querySelector('#popup'));
$compile(pp)($scope);

ポップアップがマップに追加された後、新しい dom が作成されます。Angularjs の jqlite を使用して、dom を取得し、スコープに対してコンパイルして、呼び出す必要のあるメソッドにバインドすることができます。

于 2014-03-17T10:01:30.760 に答える
0

チラシを使っています

var map = L.map('div-map');                    
// ...

Scope オブジェクトを作成する

var newScope = $scope.$new();

newScope.object = someObject;

newScope.myfunction = function(){ console.log("Testing")}

あなたのhtml文字列

var html =  
'<div><p><strong>ID : </strong>{{object.userId}}</p>'+
'<p><strong>Name : </strong>{{object.firstName}} {{object.lastName}}</p>'+
'<button class="btn btn-default" ng-click="myfunction()">Call My Function</button></div>';

HTML を DOM 要素に解析する

var template = angular.element(html);

テンプレートをコンパイルする

var linkFn = $compile(template);

コンパイルされたテンプレートをスコープにリンクします。

var element = linkFn(newScope);

var marker = L.marker(
   [ object.latitude, object.longitude],
   {icon: -someIcon-}
)
.bindPopup( element[0]);

map.addLayer(marker);

コードに ($compile) を挿入することを忘れないでください。

于 2015-05-26T19:21:08.117 に答える