angularjs - Passing variable to directive template without creating new scope -

is there way pass variables using attributes directive without creating new scope ?

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

the problem ng-click='back()' refers directive scope. still can ng-click='$parent.back()' it's not want.

by default, directives not create new scope. if want make explicit, add scope: false directive:

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

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

fiddle

since new property, button, being created on scope, should create new child scope using scope: true @ardentum-c has in answer. new scope prototypially inherit parent scope, why don't need put $parent.back() html.

one other tidbit mention: though using replace: true, clicking element still calls back(). works because "the replacement process migrates of attributes / classes old element new one." -- directive doc
ng-click='back()' button='go back!' migrated first div in directive's template.