如何获取模板中元素的引用

Question

我正在尝试使用angularJs（v1.5.8）初始化图表，但我无法初始化如下所示的新图表对象，如instructions

所示

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, { ... 

因为我无法获得模板中html元素的引用。如何获得它？

angular.module("dashboard", ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.component("exceptionChart", {
    template: "<canvas class='{{$ctrl.class}}'></canvas>",
    bindings: { class: '@' },
    controller: function(){
        // how do I get a reference to canvas
    }
});

Answer 1

在您的控制器中，您可以注入$element服务以访问template。

理想情况下，您应该访问组件的$element生命周期钩子中的$postLink()，这将确保所有后代指令都已编译。

controller: function($element){
    // how do I get a reference to canvas
    this.$postLink = function() {
       console.log($element)
    }
}