javascript - Angular 指令 - 范围返回 0 而不是值

Question

我有以下 Angular 指令:

var OrgChartDirective = function() {
    return {
        restrict: 'AE',
        scope: {
            source     : '=',
            container  : '=',
            stack      : '=',
            depth      : '=',
            interactive: '=',
            showLevels : '=',
            clicked    : '=' // We use '=' here rather than '&' for this callback function
        },
        link: function(scope, element, attrs) {
            var target = $(element);
            var source = $('#' + scope.source);
            var options = {
                container  : target,
                nodeClicked: scope.clicked,
                stack      : scope.stack,
                depth      : scope.depth,
                interactive: scope.interactive,
                showLevels : scope.showLevels
            };
            console.log("Drawing org chart at " + scope.source + " on " + target);
            console.log(scope);
            source.orgChart(options);
        }
    }
};

我将其添加到页面中，如下所示:

<org-chart source='list-for-wf'/>或<div org-chart source='list-for-wf'> </div>

问题是，在我的控制台中，我看到:

Drawing org chart at 0 on [object Object]

为什么源返回 0 ，这就像当您尝试访问无效元素时的 jquery 一样。即使我记录source作为链接函数的第一行，它是 0

这是为什么呢？我已经尝试过data-source="..."和各种各样的东西。有什么想法吗？

Answer 1

属性被读取为 JavaScript 表达式，因此 source="list-for-wf"被解释为“变量list减去关键字for减去变量wf”。 (我有点惊讶 Angular 没有在该关键字上抛出错误而不是返回零，但是嘿。)

我认为你想要一个带引号的字符串:<org-chart source="'list-for-wf'">