Question

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

myDirective：

let statusBarView = UIView(frame: CGRectMake(0, 0,
                    UIApplication.sharedApplication().statusBarFrame.size.width,
                    UIApplication.sharedApplication().statusBarFrame.size.height))
statusBarView.backgroundColor = UIColor.greenColor() // Replace with color you desire
self.view.addSubview(statusBarView)

template.html：

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

我的电话：

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

问题是注入的javascript尝试在div中生成一个id为“test”的图表但是失败了，因为在这个阶段，angular还没有插入{{vm.name}}作为元素id。我如何分离这个javascript代码，以便在角度插入元素的id后执行它？我查找了post link方法，但不确定这是否是正确的方法。

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

Answer 1

你需要使用链接功能，模板也非常简单，所以你可以让它内联..

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
    });
}

Angular.js链接后插入javascript

1 个答案: