current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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>
share|improve this question
    
how you wrote directive on the page? and where is directive html? – Pankaj Parkar Dec 23 '15 at 19:58
    
I've added my code from the view – Donny van V Dec 23 '15 at 20:02
up vote 1 down vote accepted

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>
share|improve this answer
    
Yes that works fine! Thanks! Is there a bether way of doing this? – Donny van V Dec 23 '15 at 20:15
    
@DonnyvanV who you find bad in this way..? This is the only correct way of doing it. – Pankaj Parkar Dec 23 '15 at 20:18
    
Well its not a mather of finding it bad, but more a the logic that seems to be hard, i thought that the code i've written wasn't well enough like the controller and factory – Donny van V Dec 23 '15 at 20:20
1  
@DonnyvanV at a Glance I don't found any problem with your code..but if you are not really modifying or validating a data on $http success, then I would say that just do return $http promise there, like return $http.get('/api/v1/events?page='+page); – Pankaj Parkar Dec 23 '15 at 20:30
1  
@DonnyvanV Only you need to do response.data in your .then function..anyways glad to help you. Thanks ;) – Pankaj Parkar Dec 23 '15 at 20:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.