javascript - 如何在指令模板中使用传递的数据？

Question

我创建了一个可重用的组件，其指令如下:

app.directive("menu", function () {
    return {
        restrict: 'AE',
        templateUrl: '/menu.html',
        scope: {
            title: '=title'
        }
    };
});

菜单.html:

<div>{{title}}</div>

显然我想从外部传递 title 属性，并且 show 位于 menu.html 内。

main.html 中的用法:

<div menu title="test"></div>

结果:标签未解析。为什么？

Answer 1

你必须这样声明:

app.directive("menu", function () {
    return {
        restrict: 'AE',
        templateUrl: '/menu.html',
        scope: {
            title: '@'
        }
    };
});


Text Binding    (Prefix: @)
One-way Binding (Prefix: &) (for functions)
Two-way Binding (Prefix: =)

This SO post更深入地了解@ vs =