传递变量指令模板，而无需创建新的作用域(Passing variable to directive

有没有办法通过使用属性的指令变量，而无需创建一个新的范围是什么？

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;
        }
    };
});

小提琴

由于一个新的属性， button ，正在对范围内创建，通常应该使用创建一个新的子范围scope: true为@ ardentum-C拥有自己的答案。 新范围将prototypially继承从父范围，这就是为什么你不需要把$parent.back()到HTML中。

另一珍闻提到：尽管我们使用的replace: true ，单击元素还是叫back() 这工作，因为“置换过程迁移所有属性/类的从旧元素新的。” - 指令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例子 。

文章来源: Passing variable to directive template without creating new scope