Ich erstelle eine AngularJS-Direktive. Ich möchte, dass diese Direktive andere Inhalte umschließt, die mit einem Klick darauf versehen sind. Die resultierende Schaltfläche führt beim Klicken nichts aus. Hier ist eine vereinfachte Version des Codes, den ich ausprobiert habe:

(HTML)

<div ng-app="someapp">
    <div ng-controller="Ctrl1">
        <h2>Example</h2>
        <my-dir data-x="1">
            <button ng-click="refresh()" id="refresh1">Refresh</button>
        </my-dir>
        <my-dir data-x="2">
            <button ng-click="refresh()" id="refresh2">Refresh</button>
        </my-dir>
    </div>
</div>

(JavaScript)

var app = angular.module('someapp', []);

app.controller('Ctrl1', function($scope){ });

app.directive('myDir', function(){
    return {
        restrict: 'E',
        scope: {},
        template: '<div><p>Directive contents:</p><div ng-transclude></div></div>',
        transclude: true,
        link: function(scope, element, attrs){
            $scope.y = attrs.x+1;
            scope.refresh = function(){
                console.log("Refresh Called, y = ", $scope.y);
            }
        }
    };
});

Wie kann ich das ändern, damit die Schaltfläche tatsächlich die Funktion $ scope.refresh () auslöst?

Zusätzliche Klarstellung:

Ich benötige lokale Objektinformationen für die Direktive (in einem Controller können mehrere dieser Direktiven vorhanden sein), daher erstelle ich einen neuen Bereich.