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: '='
        }
    };
});

你在使用错误的隔离范围符号我相信，@会给你传入的变量的字符串表示=将双向绑定，如果名称与属性相同，你可以将它留在外面use =如上所示。

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

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

3 个答案: