如何确定可选函数是否已传递到 Angular 指令中? [英] How to determine if an optional function has been passed into an Angular directive?
问题描述
我有一个显示一些数据的指令,但我希望指令的用户能够控制该数据的显示方式.我希望允许用户使用三个选项之一来控制显示.
- 传入一个用于显示的字符串
- 传入一个将被调用以生成字符串的函数
- 或者只显示原始数据
我无法发布整个指令(NDA 和所有指令)的代码,但它是使用 D3 显示环形图的指令.中间的数字是有问题的数据.因此,假设环形图显示百分比,我可能希望中间的文本显示 55%.因此,假设 myValue 是作用域上的一个属性并设置为 55,这就是我想要做的:
这将显示 55%或者做:
这将显示 ringLabelFunction(value) 返回的任何内容最后可以选择:
它只会显示 55.
在指令中我有
<代码> ...范围: {全部的:"@",其余的:"@",值后缀:"@",centerNumberClass: "@",后缀类:"@",剩余颜色:"@",总颜色:"@",图表宽度:"@",图表高度:"@",戒指厚度:"@",labelFunction: "&",标签文本:"@"},链接:函数($scope,元素,属性){var labelContent;如果($scope.labelText){labelContent = $scope.labelText;} else if ($scope.labelFunction) {//<-- 这总是正确的labelContent = $scope.labelFunction({remaining:$scope.remaining});} else {//所以我从来没有遇到过这个labelContent = $scope.remaining;}...}...
所以,简而言之,我正在寻找一种方法来确定 $scope.labelFunction 是否已实际设置.
解决方案 您有链接 attrs
.只需检查是否定义了 label-function
并且其值引用了 function
link:function($scope, element, attrs) {if(attrs.labelFunction != undefined && typeof(attrs.onStuff) == 'function'){范围.$eval(attrs.labelFunction);}}
I have a directive that displays some data but I want to user of the directive to be able to control how that data is displayed. I would like to allow a user to be able control the display using one of three options.
- pass in a string to use for the display
- pass in a function that will be called to generate the string
- or just show the raw data
I can't post the code for the entire directive (NDA and all) but it is a directive for showing a ring chart using D3. The number in the middle is the piece of data in question. So assuming the ring chart is showing a percentage, I may want the text in the center to say 55%. So assuming myValue is a property on the scope and is set to 55, here is what I would like to do:
<div ring-chart total="100"
remaining="{{myValue}}"
center-number-class="center-number-sm"
remaining-color="#0F79C0"
used-color="#C1D3E6"
chart-width="45"
chart-height="45"
ring-thickness="3"
label-text="{{myValue}}%"></div>
which would show 55%
or do:
<div ring-chart total="100"
remaining="{{myValue}}"
center-number-class="center-number-sm"
remaining-color="#0F79C0"
used-color="#C1D3E6"
chart-width="45"
chart-height="45"
ring-thickness="3"
label-function="ringLabelFunction(remaining)"></div>
which would show whatever ringLabelFunction(value) returns
and finally have the option to do:
<div ring-chart total="100"
remaining="{{myValue}}"
center-number-class="center-number-sm"
remaining-color="#0F79C0"
used-color="#C1D3E6"
chart-width="45"
chart-height="45"
ring-thickness="3"></div>
which would just show 55.
In the directive I have
...
scope: {
total:"@",
remaining:"@",
valueSuffix: "@",
centerNumberClass: "@",
suffixClass: "@",
remainingColor: "@",
totalColor: "@",
chartWidth: "@",
chartHeight: "@",
ringThickness: "@",
labelFunction: "&",
labelText:"@"
},
link:function($scope, element, attrs) {
var labelContent;
if ($scope.labelText) {
labelContent = $scope.labelText;
} else if ($scope.labelFunction) { //<-- this is always true
labelContent = $scope.labelFunction({remaining:$scope.remaining});
} else { //so I never get to this
labelContent = $scope.remaining;
}
...
}
...
So, in short I am looking for a way to determine if $scope.labelFunction has actually been set.
解决方案 You have link attrs
. Just check if label-function
is defined and its value refers to function
link:function($scope, element, attrs) {
if(attrs.labelFunction != undefined && typeof(attrs.onStuff) == 'function'){
scope.$eval(attrs.labelFunction);
}
}
这篇关于如何确定可选函数是否已传递到 Angular 指令中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文