Angular: $event is not object

Question

I got this error: TypeError: Cannot read property 'preventDefault' of undefined at Scope.$scope.dispatchAction.

I can't figure out what is the problem, would you please help me? Thanks.

----Template----

$templateCache.put("template/dropdown-user.html",
    '<ul class="dropdown-menu dropdown-user">'+
        '<li ng-repeat-start="item in items">'+
            "<a ng-click=\"click(item,$event)\" ng-href=\"{{item.link}}\"><i class=\"fa fa-{{item.icon}} fa-fw\"></i> {{item.label}}</a>"+
        '</li>'+
        "<li ng-repeat-end class=\"divider\" ng-if=\"item.isDivider\"></li>"+
    '</ul>'
    );

---Directive---

.directive('navbarMenuUserItem',[function(){
    return {
        restrict: 'E',
        templateUrl: 'template/dropdown-user.html',
        replace: true,
        scope:{
            items: '=',
            click: '&itemClick'
        }
    }
}])

---HTML---

<navbar-menu-user-item item-click="dispatchAction(obj,event)" items="usermenu"></navbar-menu-user-item>

Controller*

app.controller('dashboardCtrl',
['$scope','$sanitize','$log','$location','dashboardService','AuthService',
    function($scope, $sanitize, $log, $location, dashboard,AuthService){

        $scope.messages = dashboard.getMessages();
        $scope.usermenu = dashboard.getUserMenu();
        $scope.sidebarmenu = dashboard.getSidebar();

        $scope.logout = function(){
            AuthService.logout();
            $location.path('/');
        };

        $scope.dispatchAction = function(obj,event){
            event.preventDefault();
            console.log(obj);
        };


    }
]);

You're using wrong syntax to call scope function binding. Try <a ng-click=\"click({obj:item,event:$event})\" in your template dropdown-user.html — Khanh TO
– Khanh TO, Commented Jun 16, 2014 at 10:48
I think that both obj and event here are undefined, can you just log them without any operations? item-click="dispatchAction(obj,event)" — maurycy
– maurycy, Commented Jun 16, 2014 at 10:58

Nikolas · Accepted Answer · 2014-06-16 11:26:33Z

1

Khan TOs suggestion is correct. You have to bind your item and your event to the scope in which your expression item-click should be evaluated.

Alternativly you could change your isolated scope definition in the directive to:

scope:{
        items: '=',
        click: '=itemClick'
    }

And your item-click attribute in the HTML to:

item-click="dispatchAction"

In this way you bind your dispatchAction function directly to a variable in your directives scope.

answered Jun 16, 2014 at 11:26

Nikolas

1,1761 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: $event is not object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related