While I'm delving into Angular js v1.5, I'm taking the opportunity to experiment with components. In this endeavor, I've come up with 2 components:
- A circular button, aptly named "circular button".
- A component that encapsulates a circular button and a text field, known as "counter button". This component serves to display a counter alongside the circular button, akin to the 'like' or 'dislike' buttons on YouTube.
Here's the template code for the circular button:
<button
class="circular-button {{ $ctrl.config.color }}"
ng-click="$ctrl.onClick()">
{{ $ctrl.config.text }}
</button>
Definition code for the circular button component:
components.component('circularButton', {
bindings: {
onClick: '&',
config: '<'
},
templateUrl: '/views/components/photos-circular-button.html'
});
Template code for the "counter button" component:
<span>
<circular-button
config="$ctrl.buttonConfig"
on-click="$ctrl.action()"></circular-button>
</span>
<span>{{ $ctrl.counter }}</span>
And the component definition code for it:
components.component('counterButton', {
bindings: {
onButtonClick: '&',
counter: '<',
buttonConfig: '<'
},
templateUrl: '/views/components/photos-counter-button.html',
controller: function () {
var ctrl = this;
ctrl.disabled = false;
ctrl.action = function () {
ctrl.counter++;
ctrl.onButtonClick();
}
}
});
The general behavior dictates that when the button is clicked, the counter increments by 1. Currently, the parent component, "counter-button," passes a function to execute upon clicking the circular button, utilizing the bindings property as such:
onClick: '&'
This way, the parent component injects the function to be executed. I've followed the Angular Component documentation found here under the "Example of a component tree" section.
Thus far, everything is functioning smoothly. However, I aim to enhance the component by having the circular button disable after being clicked, allowing a user to increment the counter only once. Similar to the behavior of the 'like' button on a YouTube video.
To implement this, I attempted to add the ng-disabled directive to the counter-button template as follows:
<span>
<circular-button
config="$ctrl.buttonConfig"
on-click="$ctrl.action()" ng-disabled="$ctrl.disabled"></circular-button>
</span>
<span>{{ $ctrl.counter }}</span>
Additionally, I incorporated the following line of code in the component controller:
controller: function () {
var ctrl = this;
ctrl.disabled = false;
ctrl.action = function () {
ctrl.counter++;
ctrl.disabled = true; //NEW LINE OF CODE.
ctrl.onButtonClick();
}
}
Nonetheless, this approach failed as the ng-directive applies to the
<circular-button></circular-button>As a result, I am contemplating ways to disable the button from the parent component (or any client using the circular button) without introducing another binding to maintain the circular button's generic nature. Your suggestions and insights on alternative methods would be greatly appreciated. Thank you in advance!