angularjs - 将变量传递给指令模板而不创建新范围

Question

有没有一种方法可以使用属性将变量传递给指令而不创建新范围？

HTML

<div ng-click='back()' button='go back'></div>

JS

.directive('button', function () {
    return {
        scope: {
            button: '@'
        },
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true
    }
})

问题是 ng-click='back()' 现在引用了指令范围。我仍然可以执行 ng-click='$parent.back()' 但这不是我想要的。

Answer 1

默认情况下，指令不会创建新作用域。如果您想明确表示这一点，请将 scope: false 添加到您的指令中:

<div ng-click='back()' button='go back!'></div>

angular.module('myApp').directive("button", function () {
    return {
        scope: false,  // this is the default, so you could remove this line
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true,
        link: function (scope, element, attrs) {
           scope.button = attrs.button;
        }
    };
});

fiddle

由于正在作用域上创建新属性 button，因此您通常应该使用 scope: true 创建一个新的子作用域，就像 @ardentum-c 中那样他的回答。新范围将 prototypially inherit来自父范围，这就是为什么您不需要将 $parent.back() 放入 HTML 中。

还有一个值得一提的小知识:即使我们使用 replace: true，单击该元素仍然会调用 back()。这是有效的，因为“替换过程将所有属性/类从旧元素迁移到新元素”。 -- directive doc
因此，ng-click='back()' button='go back!' 被迁移到指令模板中的第一个 div。