Передача переменной в шаблон директивы без создания новой области

Есть ли способ передать переменные, используя атрибуты в директиве, без создания новой области?

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()', но это не то, что я хочу.

Ответы

Ответ 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
So ng-click='back()' button='go back!' переносится в первый div в шаблоне директивы.

Ответ 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.