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

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在其答案中创建一个新的子作用域.新范围将原型继承父范围,这就是您不需要放入$parent.back()HTML的原因.

还有一点要提:即使我们正在使用replace: true,点击元素仍然会调用back().这是因为"替换过程将所有属性/类从旧元素迁移到新元素." - 指令doc
因此ng-click='back()' button='go back!'迁移到div指令模板中的第一个.