TAGS :Viewed: 10 - Published at: a few seconds ago

[ Handling click on transcluded content of an angularjs directive ]

So lets say I have a directive that looks like so:

(function () {
    'use strict';

    angular
        .module('app')
        .directive('foo', foo);

    /* @ngInject */
    function foo() {
        var directive =  {
            restrict : 'E',
            controller: controller,
            controllerAs: 'vm',
            link: link,
            transclude : true,
            replace : true,
            bindToController: true,
            scope: {},
            template : '<div><div ng-transclude></div>'
        };

        return directive;

        function controller() {
            var vm = this;
            vm.click = function () {
                // do something, add class whatever
            }
        }
        function link(scope, elem, attrs) {}
    }



}());

Now if I use the directive like so:

<foo>
   <button ng-click="vm.click()">Click me!</button>
</foo>

I wanted to access the click function of the directive, how do I do that?

Answer 1


The transcluded contents scope is not created as a child of it's directives scope if there directive itself is defined with an isolated scope.

See: Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?

As such kwan245's answer is correct for your particular example.