文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS指令-将属性值链接到范围属性

问AngularJS指令-将属性值链接到范围属性
EN

Stack Overflow用户

提问于 2016-08-11 10:30:16

回答 2查看 63关注 0票数 0

在我的应用程序中，我使用了角-nvd3 3来绘制图表。我创建了一个自定义指令来传递指令中的选项，而不是在控制器中设置它们。

查看：

<nvd3-bar-chart></nvd3-bar-chart>

指令

angular.module('app.graphs')
    .directive('nvd3BarChart',
        function() {
            return {
                restrict: 'E',
                replace: true,
                template: '<nvd3 options="nvd3_options" data="bar_data" api="api"></nvd3>',
                link: function(scope) {
                    scope.nvd3_options = {
                        chart: {
                            type: 'discreteBarChart',....

bar_data属性在控制器中设置，图表工作正常。但是，我希望重用该指令，以绑定到控制器中的不同数据属性。

就像这样。本质上将自定义指令上的数据属性链接到指令中的模板。

//Temperature data would be set in controller
<nvd3-bar-chart data="temperature_data"></nvd3-bar-chart>

//Precipitation data would be set in controller
<nvd3-bar-chart data="precipitation_data"></nvd3-bar-chart>

谢谢

angularjs

angularjs-directive

angularjs-scope

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-15 09:19:44

最后，我通过直接在自定义指令上指定属性来解决这个问题。

当用模板标记替换指令标记时，它会向已替换的html行添加任何属性。

票数 0

Stack Overflow用户

发布于 2016-08-11 10:34:18

scope: {
 dataParam: '@'
},
template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>',

没有隔离范围：

template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>',
link: function (scope, element, attr) {
    scope.dataParam = attr.dataParam;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38893812

复制

相似问题

问AngularJS指令-将属性值链接到范围属性
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS指令-将属性值链接到范围属性EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS指令-将属性值链接到范围属性
EN