在 treant.js 图表中创建 ng-click 按钮

Question

我正在创建一个这样的淘汰赛图表（名称是随机创建的）： Diagram

为了创建图表，我为 Treant 创建了输入，这要感谢我的 angularJS 文件中的 java-脚本：

/*
    Returns the HTML representing a match
*/
var populateGraphCell = function(match) {
    var content = "";
    if(match.registration_1 != undefined) {
        content += registration_to_html(match.registration_1);
    } else {
        content += "<button ng-click='bonjour()'>Add registration 1</button>";
    }
    content += "<br />";
    if(match.registration_2 != undefined) {
        content += registration_to_html(match.registration_2);
    } else {
        content += "<button>Add registration 2</button>";
    }
    content += "<br />";
    if(match.court != undefined) {
        content += court_to_html(match.court);
    } else {
        content += "<button>Add court</button>";
    }
    return content;
}
$scope.bonjour = function() {
    console.log("hello")
}

但我想知道是否有办法使用 ng-click？，在 google chrome 调试模式下，我可以看到 ng-click 元素，但是当我点击它时, 没有任何反应

Answer 1

那是因为angular必须编译它。你可以使用类似这样的东西来编译它：

$timeout(function () {
    var element = $("your element id or class here");
    $compile(element)($scope)
});

这里有一个 plunker 为您展示它：http://plnkr.co/edit/ctcpBpg8YOhlnxPXRBB1?p=preview

顺便说一句，这不是一个好的做法。你不应该操纵你的 DOM 对象。这就是 AngularJS 存在的原因之一。您可以创建某种类型的指令。

在 treant.js 图表中创建 ng-click 按钮

Create ng-click button in treant.js diagram

tree

graph

click

button

angularjs