如何获得在模板中的元素的引用

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访问。

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

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