2016-12-05 61 views
0

在AngularJS控制器中添加對html的函數調用時遇到問題。如何在angularJS控制器中設置ng-click(IONIC)

UPDATE: 好吧,我有一點點更具體:

我的問題是有裏面的按鈕彈出單張。 的GeoJSON的數據異步加載和我有一個「onEachFeature」功能,彈出窗口添加到 - 功能看起來像:(!這是簡化的)

.controller('MapCtrl', function($scope, $state) { 
    function oef(feature, layer) { 
    var bounds = layer.getBounds(); 
    var center = bounds.getCenter(); 

    var marker = L.marker(center).addTo(MAP); 

    var popup = new L.Popup({ 
     autoPan: false, 
     keepInView: true, 
     closeButton: false, 
     offset: new L.point(0, -5) 
    }).setContent("<div><a ng-click='test()'>"+feature.properties.tooltip + "</a></div>"); 


    } 

    //LOADING AND ADDING DATA TO MAP 
    .... 
    //END 

    $scope.test = function(){ 
    alert("HI"); 
    } 
}); 

任何想法?

+0

爲什麼你有HTML代碼控制器的視圖中,而不是? –

+0

我改變了我的代碼 - 所以現在應該更容易理解 – nrhode

+0

@nrhode你沒有得到它與Angular的''compile''一起工作嗎? – lealceldeiro

回答

2

您需要編譯您的html以允許角度解釋html中的「角碼」(請參閱​​https://docs.angularjs.org/api/ng/service/ $編譯),否則它只是「角度世界」中的一個簡單字符串。請參閱下面列出的示例。

angular.module('myapp', []) 
 
    .controller('foo', function($scope, $compile) { 
 

 
    var div = "<div><a ng-click='hello()'>Hi</a>"; 
 
    var parent = angular.element(document.querySelector('#target')).append(div) 
 
    $compile(parent.contents())($scope); 
 

 
    $scope.hello = function() { 
 
     console.log("'Hi div' clicked: Hi!") 
 
    } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<style type="text/css"> 
 
    .hand { 
 
    cursor: hand; 
 
    cursor: pointer; 
 
    } 
 
</style> 
 

 
<div ng-app="myapp"> 
 

 
    <div ng-controller="foo"> 
 
    <div id="target" class="hand"></div> 
 
    </div> 
 

 
</div>