I am trying to create an AngularJS directive that wraps content containing ng-click, but the resulting button does not respond when clicked. Here is a simplified version of the code I attempted:
(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);
}
}
};
});
How can I modify the code so that clicking the button triggers the $scope.refresh() function?
Additional Information:
I require local object details for the directive (as there may be multiple instances within one controller), hence the creation of a new scope.