Angular JS - On click load controller function

Question

I'm creating a small event app with angular for practicing. Currently i've created a application with Laravel 5.1 and returning some URL's with JSON. I load those URL's in my Factory for the events. Those events will be rendered with Angular. After they are rendered, a button with "Show info" will be placed and when you click at it, i want to call a function in the EventController so my $scope.event will receive the new data. My Controller has a function with $scope.getEvent(eventID); but i cant figure out how to run that function on click.

//Controller
app.controller('EventController', ['$scope', 'eventFactory', '$http', function ( $scope, eventFactory, $http )
{
    eventFactory.getEvents(1).then(function(response){
        $scope.events = response.events;
        $scope.eventPaginator = response.pagination;
    });

    $scope.getEvent = function(value){
        console.log('trigger');
        eventFactory.getEvent(value).then(function(response){
            $scope.event = response;
        });
    };

    $scope.loadPage = function(page){
        eventFactory.getEvents(page).then(function(response){
            $scope.events = response.events;
            $scope.eventPaginator = response.pagination;
        });
    };


}]);

//Directive
app.directive('event', function() {
    return {
        restrict: 'E',
        scope: {
            data: '=',
            loadEvent: '&',
        },
        templateUrl: '/assets/website/angular/views/event.html',
        link: function(scope, element){
            scope.loadEvent(function(){
                alert('Click')
            });
        },
    };
});

//Factory
app.factory('eventFactory', ['$http', function ( $http )
{
    return {
        getEvents: function (page)
        {
            return $http.get('/api/v1/events?page='+page)
                    .then(function ( response )
                    {
                        return response.data;
                    });
        },
        getEvent: function (id)
        {
            return $http.get('/api/v1/event/'+id)
                    .then(function ( response )
                    {
                        return response.data;
                    });
        }
    };
}]);


//View
<div class="event">
    <h2>[[data.event.title]] ID: [[data.event.id]]</h2>
    <div class="event-image">

    </div>
    <div ng-click="loadEvent(data.event.id)">Click voor [[data.event.id]]</div>
</div>




//HTML code for the Laravel View
<div class="col-md-9" ng-controller="EventController">
            <div class="btn btn-success" ng-click="getEvent(15)">Test</div>
            <div class="row">
                <h1 ng-bind="showEvent.event.title"></h1>
                {#<div class="col-md-12">#}
                    {#<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>#}
                    {#<div ng-controller="BannerController">#}
                        {#<ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-transition="slide" rn-carousel-duration="1000" class="image carousel">#}
                            {#<li ng-repeat="banner in banners">#}
                                {#<img ng-src="[[banner.image]]" alt="" class="img-responsive">#}
                            {#</li>#}
                        {#</ul>#}
                    {#</div>#}
                {#</div>#}
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-4" ng-repeat="event in events">
                            <h1>Een event</h1>
                            <event data="event"></event>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <h3>[[eventPaginator.total]]</h3>
                  <div class="pagination">
                        <div ng-repeat="n in [] | range:eventPaginator.total">
                            <button ng-click="loadPage(n+1)">[[n+1]]</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

I think you wanted to call the parent controller function from the directive template with passing id parameter to it. For that you need to pass the method reference to the directive in by adding load-event attribute with getEvent(id) on the directive element.

Also you should remove the unwanted link which has wrong code in it.

//below code should remove from the directive.
scope.loadEvent(function(){
    alert('Click')
});

Directive Template

<event data="event" load-event="getEvent(id)"></event>

Template

<div ng-click="loadEvent({id: data.event.id})">Click voor [[data.event.id]]</div>