As a beginner in Angular, I am trying to create my own directive to understand how these objects function. My main challenge lies in isolating the scope of the directive so that I can use it multiple times within the same controller.
To illustrate the situation better, I have created a plunker: http://plnkr.co/edit/NsISESR9sIs5Nf577DX4?p=preview
Here is the example code:
<body ng-controller="MainCtrl">
<button id="button1" ng-click="dummyClickFoo()" wait-button>Foo</button>
<button id="button2" ng-click="dummyClickBar()" wait-button>Bar</button>
</body>
And the JavaScript code:
app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.dummyClickFoo = function() {
$scope.startSpinner();
setTimeout(function() {
$scope.stopSpinner();
}, 3000);
};
$scope.dummyClickBar = function() {
$scope.startSpinner();
setTimeout(function() {
$scope.stopSpinner();
}, 3000);
};
});
app.directive('waitButton', function() {
return {
restrict: 'A',
controller: ['$scope', '$element', function($scope, $element) {
$scope.startSpinner = function() {
alert($element.attr('id'));
};
$scope.stopSpinner = function() {
alert($element.attr('id'));
};
}]
};
});
While this setup works with one button, it encounters issues with two buttons. I understand the need to isolate their scopes but I am unsure of how to do so without using extra attributes to pass variables. Most examples I've found online rely on passing variables, whereas I need to call internal methods.
If anyone can guide me on how to achieve this, I would greatly appreciate it. Thank you!