1

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?

Fals
  • 6,813
  • 4
  • 23
  • 43
Joey Hipolito
  • 3,108
  • 11
  • 44
  • 83
  • possible duplicate of [Transcluding ng-click in a directive](http://stackoverflow.com/questions/20940766/transcluding-ng-click-in-a-directive) – soote Jun 18 '15 at 04:30

2 Answers2

0

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.

Community
  • 1
  • 1
Paul Popiel
  • 930
  • 11
  • 21
-1

remove scope: {} from directive declaration and it should works.

sina72
  • 4,931
  • 3
  • 35
  • 36
kwangsa
  • 1,701
  • 12
  • 16
  • Please try adding more details on how that answer could provide a solution to the problem. That way, the OP (and anybody else) will be able to get a better understanding of your answer. – dhh Jun 18 '15 at 05:58