我使用 plunker 中的范围创建了一个 d3 条形图指令 http://plnkr.co/edit/yF8H9i8tyu1o2xJCN9bV
Controller 的范围内有 chartData。
.controller('d3Controller', ['$scope', function($scope) {
$scope.chartData = [10,20,30,40,50];
}])
并且我将 chartData 与指令的隔离范围双向关联
scope: {
chartData: '='
},
restrict: 'EA',
replace: false,
link: function (scope, elem, attrs) {
var data = attrs.chartData.split(',');
var d3 = $window.d3;
var chart = d3.select(elem[0]);
chart
.append("div")
.attr("class", "chart")
//returns an array of all <div>...</div> elements in div
.selectAll("div")
.data(scope.chartData)
.enter()
.append("div")
.transition().ease("elastic")
.style("width", function (d) {
return d + "%"
})
.text(function (d) {
return d + "%"
});
相关指令如下
<bar-chart chart-data="chartData"></bar-chart>
这工作正常。但是,我正在尝试使用“controllerAs”做同样的事情
我尝试进行一些更改,但它不起作用。
http://plnkr.co/edit/eIRkAtfJx9rlWN5LtllC
我将 Controller 的作用域图表数据更改为此
.controller('d3Ctrl', ['$scope', function($scope) {
var self = this;
self.chartData = [10,20,30,40,50];
}])
为指令使用 controllerAs 和 bindToDirective 选项
scope: { },
controllerAs: 'barCtrl',
controller: function() { },
bindToDirective: {
chartData: '='
},
当试图获取 chartData 时,提示 barCtrl 未定义。
.selectAll("div")
.data(barCtrl.chartData)
我做错了什么?
最佳答案
您在 controller As
代码中错误地做了一些事情。
1) 您需要通过设置的 scope
属性指定 2 方式绑定(bind),而不是 bindToDirective
,在指令设置中没有像这样的可识别属性。
2) 需要使用 bindToController
标志来指定要添加到 Controller 实例的任何范围绑定(bind) 2 路绑定(bind)属性,而不是直接在范围上。尽管您可以执行 bindToController:{chartData:"="}
,但官方文档中没有记录,因此我不建议这样做,因为它也可以在即将推出的版本。
3) 您可以将链接函数的第四个参数用作 Controller 实例,并在您的链接函数中引用它。
看起来像
.directive('barChart', ['$window', function($window) {
var myDirective = {
controllerAs: 'barCtrl',
controller: angular.noop,
bindToController:true, //<-- Need to specify bound values to be added to the controller instance
scope: { //Need to use scope not bindToDirective
chartData: '='
},
restrict: 'EA',
replace: false,//if it is false you don't need it
//use the 4th argument as the controller instance
link: function (scope, elem, attrs, barCtrl) {
}
关于javascript - controllerAs 在指令的链接功能中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33313246/