Angularjs 在treant.js图中创建ng单击按钮

我正在创建一个类似这样的仿制品比赛图（名称是随机创建的）：

为了创建图形，我在angularJS文件中使用java脚本为Treant创建输入：

/*
    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")
}

/*
返回表示匹配项的HTML
*/
var populateGraphCell=函数（匹配）{
var-content=“”；
if（match.registration_1！=未定义）{
内容+=注册到html（匹配.注册1）；
}否则{
内容+=“添加注册1”；
}
内容+=“
”；
if（match.registration_2！=未定义）{
内容+=注册到html（匹配.注册2）；
}否则{
内容+=“添加注册2”；
}
内容+=“
”；
if（match.court！=未定义）{
content+=court\u to\u html（match.court）；
}否则{
内容+=“添加球场”；
}
返回内容；
}
$scope.bonjour=函数（）{
log（“你好”）
}

---

但是我想知道是否有一种方法可以使用ng click？，在google chrome调试模式下，我可以看到ng click元素，但是当我单击它时，什么都不会发生，因为angular必须编译它。您可以使用类似这样的方法来编译它：

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

这里有一个plunker为您展示：

---

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

非常感谢，我正在尝试这样做。但是你能解释一下我应该怎么做才能在这里使用指令吗？你能更好地解释一下你想要什么吗？我建议打开一个新的问题，因为这是一个完全不同的问题。你说最好通过创建某种类型的指令来完成，但我真的不明白我应该怎么做，但你能更好地解释你的整个代码吗？例如，如何调用populateGraphCell？此图的目的是表示网球比赛。因此，我们从后端（Django）接收元素，并将其转换为javascript中Treant.js的可读格式。然后我们创建treant对象。每个“单元”的填充方式如下：