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()'now 指的是指令范围。我仍然可以做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(). 这是因为“替换过程将所有属性/类从旧元素迁移到新元素”。--directive doc
所以ng-click='back()' button='go back!'迁移到指令模板中的第一个div。

Answer 2

我想你应该在这种情况下使用编译功能。

angular.module('myApp').directive("button", function () {
    return {
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true,
        scope:   true,
        compile: function (tElement, tAttrs) {
            // this is link function
            return function (scope) {
                scope.button = tAttrs.button;
            };            
        }
    };
});

这是jsfiddle 示例。