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

Question

我正在使用带 angular 的传单地图并添加了图例。为了更改地图的外观，我在使用 $timeout-method 加载视图后操作了 DOM。图例应该可以点击 select 哪些项目应该出现在地图上。因此，当单击图例中的一项时，我尝试发出警报。为此，我将项目更改为按钮只是为了确定。但是按钮点击不起作用，因为它不知道方法。

有人知道如何在被操纵的 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");
}

Answer 1

您的 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

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

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

Angular Js - Manipulate DOM and add click behaviour

javascript

dom

click

dom-manipulation

angularjs