Q:

Angular - component with event attribute

I created component in Angular 1 which represents checkbox. I would like added event for call some action (from controller) after checked. Here is my code:
threeListsApp.component("checkbox",
{
    template: '<div ng-if="!checked" ng-click="check()" ng-model="checked"></div>' +
        '<div ng-if="checked" ng-click="check()" ng- model="checked"><i class="fa fa-check"></i></div>',
    controller: function checkBoxController($scope) {
        $scope.checked = false;
        $scope.check = function () {
            $scope.checked = !$scope.checked;
            if ($scope.checked) {
                //CALL SOME ACTION
            }
        }
    }
});

I'd like to use something like this: <checkbox checkedEvent="{{controllerAction()}}"></checkbox>
How to add event to component? Thanks for advices

A:

Here is my solution (I used directive):
threeListsApp.directive('checkbox', function ($rootScope) {
    return {
        restrict: 'E',
        template: '<div><div ng-if="!checked" ng-click="check()" ng-model="checked"></div>' +
        '<div ng-if="checked" ng-click="check()" ng- model="checked"><i class="fa fa-check"></i></div></div>',
        replace: true,

        link: function (scope, element, attrs, model) {
            scope.checked = false;

            scope.check = function () {
                scope.checked = !scope.checked;
                if (scope.checked) {
                    var id = attrs.checked.substring(attrs.checked.lastIndexOf("(") + 1, attrs.checked.lastIndexOf(")"));
                    var method = attrs.checked.substring(0, attrs.checked.lastIndexOf("("));
                    $rootScope[method](id);
                }
            }
        }
    }; });

Use:
<checkbox checked="controllerMethod({{item.ID}})"></checkbox>

