Angular Js - 操纵DOM并添加点击行为

时间:2015-04-16 16:06:45

标签: javascript angularjs dom click dom-manipulation

我正在使用带角度的传单地图并添加了一个图例。为了改变地图的外观,我在视图加载了$ timeout-method之后操纵了DOM。图例应该是可点击的,以选择应在地图上显示的项目。因此,当点击图例中的一个项目时,我尝试发出警报。为此,我将项目更改为按钮,以确保。但按钮点击不起作用,因为它不知道该方法。

有人知道如何在被操纵的DOM对象上调用ng-click方法吗?

以下是我的一些代码:

controller.js

//initiating of the map happend before 
//now loading of the markers and manipulating of the map
function activate() {
    projectService.getMarkers(vm, 'projectsData');
    bindEventListener();

    $timeout( function() {
        getLegendElement();
    });
}

//manipulating of the legend element to make a button with a ng-click
function getLegendElement() {
    var element = document.getElementsByClassName("legend leaflet-control");
    element[0].children[0].innerHTML = '<button ng-click="showAlert()">ok</button>';
}

//showing the alert
$scope.showAlert = function(){
    $window.alert("foo");
}

1 个答案:

答案 0 :(得分:3)

您的DOM操作应该移动到指令。但是,如果您想将它保留在控制器中,则需要将$compile注入控制器并在动态生成的html上调用它。

function getLegendElement() {
    var element = document.getElementsByClassName("legend leaflet-control");
    element[0].children[0].innerHTML = '<button ng-click="showAlert()">ok</button>';
    $compile(element)($scope);
}

之所以这样,是因为Angular会在首次解析模板时查找需要生成的事件绑定。由于您正在应用需要绑定到最初解析模板时不存在的html的延迟事件,因此您需要告知Angular更新其对模板的理解。 documentation称之为:

  

$ compile

     

将HTML字符串或DOM编译到模板中并生成模板函数,然后可以使用该函数链接范围和   模板在一起。