链接后插入javascript

Angular.js Insert javascript after linking

本文关键字：javascript 插入 链接      更新时间：2023-09-26

我创建了一个自定义元素指令，它在DOM中插入一个元素，并为该元素添加一些javascript代码。我的代码如下所示:

myDirective: 

return {
   restrict: 'E',
   templateUrl: 'template.html',
   scope: {
     name: '@name'
   },
   controller: MyController,
   controllerAs: 'vm',
   bindToController: true
};

template.html: 

<div id="{{vm.name}}" />
<script type="text/javascript">
  var plugin = chart.generate({bindTo: '#{{vm.name}}'});
</script>

我的电话:

<my-directive name="test" />

问题是，注入的javascript试图在id为"test"的div中生成一个图表，但失败了，因为在这个阶段，angular还没有插入{{vm.name}}作为元素id。我怎么能分离这个javascript代码，使它得到执行后，角插入元素的id ?我查找了帖子链接方法，但我不确定这是否是正确的方法。

//编辑:澄清:基本上我想创建一个指令，它通过属性(名称)传递参数，并使用此参数将其设置为div的id，并使用一些javascript代码在该div内生成图表。

你需要使用link函数，而且这个模板很简单，所以你可以将它内联。

return {
    restrict: 'E',
    template: '<div id="{{vm.name}}" />',
    scope: {
        name: '@name'
    },
    controller: MyController,
    controllerAs: 'vm',
    bindToController: true,
    link: function(scope, element, attr) {
        var plugin = chart.generate({
            bindTo: '#{{vm.name}}'
        });
    }
};

现在我不确定图表是如何工作的，但你应该检查一下，如果你可以给它元素而不是选择器，然后你就不需要模板了。

link: function(scope, element) {
    var plugin = chart.generate({
        bindTo: element
    });
}
相关文章：