FYI: You can simplify your directive greatly by using built in Angular
functionality...
app.directive('btnSwitch', function () {
return {
restrict: 'EAC',
template: '<span class="btn boolean" ng-click="toggle()"><span
class="on btn-primary" ng-show="model">Yes</span><span class="off
btn-default" ng-hide="model">No</span></span>',
replace: true,
scope: {
model: '=?ngModel'
},
link: function (scope) {
scope.toggle = function() {
scope.model = !scope.model;
}
}
};
});
You can easily add most configurations through the isolate scope and bind
them directly into the template as well...
Let angular do more work for you!
On Tuesday, March 19, 2013 8:02:05 AM UTC+1, Peter Smith wrote:
>
> Hi there Andy,
>
> The CSS image easing method was where I started as shown on the first
> switcher on the plunker. However I wanted a bit more control over the
> colour and text.
>
> With the image method you need an image for each colour/text/font
> variation/combination.
>
> With the directive/template method you can change the text to
> Yes/On/True/1/icon-check/etc and you can change the style of the on-button
> to btn-primary, btn-warning, btn-danger. In fact the next stage is to
> provide some configuration to allow just that.
>
>
>
> On Saturday, 16 March 2013 17:51:09 UTC, Peter Smith wrote:
>>
>> I have created a rather neat looking checkbox replacement that is crying
>> out to be turned into a directive. However after spending the day figuring
>> out the styling I can't figure out how to make the thing into a directive.
>> Can anyone help? The plunker is at
>> http://plnkr.co/edit/aBq78nWMf5dGVxbsBmP2?p=preview
>>
>> Regards,
>>
>> Peter
>>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
