javascript - AngularJS 自定义指令显示 {{obj}} 但不显示 {{obj.prop}}？

Question

我正在尝试构建一个非常简单的 Angular 指令：

app.directive("myDirective", function () {
    return {
        template: "{{result}} {{result.startTime}}",
        scope: {
            result: '@result'
        }
    };
});

我在视图中以这种方式使用它：

<div my-directive result="{{result}}"></div>

问题是{{result}}正确显示（作为json）下流，而{{result.startTime}}没有显示，尽管显示{{result}}包含startTime属性。

Answer 1

app.directive("myDirective", function () {
    return {
        template: "{{result}} {{result.startTime}}",
        scope: {
            result: '='
        }
    };
});

我相信您在那里使用了错误的隔离范围符号，@ 将为您提供传入的变量的字符串表示 = 将双向绑定，如果名称与属性相同，您可以将其省略，只需使用 = 作为如上所示。

Answer 2

尝试使用“=”而不是“@”。“@”将其作为字符串引用引入。

scope: {
  result: "="
}

Answer 3

2个问题：

1 您需要传入模型，而不是插值字符串。

<div my-directive result="result"></div>

2 您需要将值分配给指令，因此请使用“=”而不是“@”，这为您提供了从指令返回到 DOM 的单向绑定。

app.directive("myDirective", function () {
    return {
        template: "{{result}}, {{result.startTime}}",
        scope: {
            result: '='
        }
    };
});

Working Demo