Angular - ng-click function on transcluded directive content is not triggered

Question

I have two directives, parent directive should simply wrap around its child. The transclusion is used for this purpose. However, then any other directive, such as ng-click, bound to the child directive element as its attribute does not work (is it not compiled?).

Here is the JS:

(function(angular) {
  'use strict';
angular.module('docsIsoFnBindExample', [])
  .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.name = 'Tobias';
    $scope.message = '';
    $scope.hideDialog = function(message) {
      $scope.message = message;
      $scope.dialogIsHidden = true;
      $timeout(function() {
        $scope.message = '';
        $scope.dialogIsHidden = false;
      }, 2000);
    };
  }]) //controller is not important now

  .directive('myDialog', function() { //parent directive
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        'close': '&onClose'
      },
      template: '<div class="alert"><a href class="close" ng-click="close({message: \'closing for now\'})">&times;</a><div ng-transclude></div></div>'
    };
  })

  .directive('daka', function() { //child directive
    return {
      restrict: 'E',
      scope: {
        'input': '@'
      },
      link: function(scope, element, attributes) {
        scope.func= function() {
          console.log("blablabla"); //no console output after click event
        };
      }
    };
  });
})(window.angular);

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-transclusion-scope-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script src="script.js"></script> 
</head>
<body ng-app="docsIsoFnBindExample">
  <div ng-controller="Controller">
  {{message}}
  <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">
    <daka ng-click="func()" input="11">BLABlABLA</daka>
  </my-dialog>
</div>
</body>
</html>

score 0 · Answer 1 · answered Jan 31 '17 at 19:08

It is trying to look ng-click in your parent directive. So you can add click event for your child directive.

.directive('daka', function() { //child directive
return {
  restrict: 'E',
  scope: {
    'input': '@'
  },
  link: function(scope, element, attributes) {
   element.on('click', function() {
            alert('outcome clicked: ');
        });
  }
};  });

working jsfiddle link -https://jsfiddle.net/p2vht8sb/

Angular - ng-click function on transcluded directive content is not triggered

1 Answers1