Question

我有一个显示某些数据的指令，但我希望指令的用户能够控制数据的显示方式。我想允许用户使用以下三个选项中的一个来控制显示。

传入一个字符串以用于显示
传入将被调用以生成字符串
或只显示原始数据

我无法发布整个指令（NDA和所有）的代码，但它是使用D3显示环形图的指令。中间的数字是有问题的数据。因此，假设环形图显示百分比，我可能希望中心的文本说55％。因此，假设myValue是作用域上的属性并设置为55，这就是我想要做的：

<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>

显示55％或者做：

<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>

将显示ringLabelFunction（value）返回的内容最后可以选择：

<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>

只会显示55。

在指令中我有

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

   ...
}

...

所以，简而言之，我正在寻找一种方法来确定是否实际设置了$ scope.labelFunction。

Answer 1

您有链接attrs。只需检查是否已定义label-function，其值是否为function

link:function($scope, element, attrs) {

   if(attrs.labelFunction != undefined && typeof(attrs.onStuff) == 'function'){
        scope.$eval(attrs.labelFunction);
    }
}

Answer 2

检查它是否是一个功能：

} else if ($scope.labelFunction && typeof($scope.labelFunction) == "function") {

如何确定是否已将可选函数传递给Angular指令？

2 个答案: