angularjs ng-click handling by child directives

Question

I have 'market' directive:

angular
.module('myModule')
.directive('market', [function () {
    return {
        restrict: 'EA',
        template: '<div outcome="outcome" ng-click="onOutcomeClick()" ng-repeat="outcome in market.Outcomes">{{outcome.Odd}}</div>', 
        controller: ['$scope', function ($scope) {
            $scope.market = {
                Outcomes: [
                    { Odd: 1 },
                    { Odd: 2 },
                    { Odd: 3 },
                    { Odd: 4 },
                    { Odd: 5 },
                ]
            };
        }],
        link: function (scope, elem, attrs) {
        }
    }
}]);

which contains many 'outcome' directives:

angular
.module('myModule')
.directive('outcome', [function () {
    return {
        restrict: 'A',
        scope: {
            outcome: '='
        },
        controller: ['$scope', function ($scope) {
            $scope.onOutcomeClick = function () {
                console.log($scope.outcome.Odd);
            };
        }],
        link: function (scope, elem, attrs) {
        }
    }
}]);

When I click on "outcome", it seems that angular looks for "onOutcomeClick" in "market" directive, but not in "outcome" directive. How to force angular to call "onOutcomeClick" from "outcome" directive (scope in "outcome" directive must be isolated)

jsfiddle example: http://jsfiddle.net/dgjcf41d/5/ I expect to see alert in example, but fail

ryeballar · Accepted Answer · 2014-11-10 16:28:01Z

1

The answer is you don't have to declare an ng-click directive inside your market directive, you can add the click event handler yourself inside the outcome directive.

FORKED DEMO

Javascript

Market directive

// remove the `ng-click` directive
.directive('market', [function () {
  return {
     // ....
     template: '<div outcome="outcome" ng-repeat="outcome in market.Outcomes">{{outcome.Odd}}'</div>
     // ...
  };
});

Outcome directive

.directive('outcome', [function () {
    return {
        restrict: 'A',
        scope: {
            outcome: '='
        },
        link: function (scope, elem, attrs) {
            elem.on('click', function() {
                alert('outcome clicked: ' + scope.outcome.Odd);
            });
        }
    }
}]);

answered Nov 10, 2014 at 16:28

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

Comments

seldary · Accepted Answer · 2014-11-10 17:12:21Z

You've defined the ngClick on the market directive. Each outcome directive has an isolated scope (which is a child of the market scope). that's why ngClick looks for onOutcomeClick in the market's scope.

Define a template for the outcome directive, and put the ngClick there.

A working forked demo:

angular.module('myModule', [])
    .controller('myController', [function () { }])
    .directive('market', [function () {
        return {
            restrict: 'EA',
            template: '<div outcome="outcome" ng-repeat="outcome in market.Outcomes"><outcome outcome=outcome>{{outcome.Odd}}</outcome></div>', 
            controller: ['$scope', function ($scope) {
                $scope.market = {
                    Outcomes: [
                        { Odd: 1 },
                        { Odd: 2 },
                        { Odd: 3 },
                        { Odd: 4 },
                        { Odd: 5 },
                    ]
                };
            }]
        }
    }])
    .directive('outcome', [function () {
        return {
            restrict: 'E',
            template: '<div ng-click="onOutcomeClick()" ng-transclude></div>',
            transclude: true,
            scope: {
                outcome: '='
            },
            controller: ['$scope', function ($scope) {
                $scope.onOutcomeClick = function () {
                    alert('outcome clicked: ' + $scope.outcome.Odd);
                };
            }]
        }
    }]);

Collectives™ on Stack Overflow

angularjs ng-click handling by child directives

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related