How to bind multiple custom events in angularjs?

Question

I need to bind custom events in angularjs(1.x) and I tried with the following code,

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://www.polymer-project.org/components/polymer/polymer.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<div ng-app="demo-app">
    <div ng-controller="DemoController">
        <template bind-angular-scope is="auto-binding">
          <paper-button raised on-tap="{{clickMe}}" on-mouseover="{{mouseOver}}">click me</paper-button>
        </template>
        <pre><code>{[{text}]}</code></pre>
    </div>
</div>

Script

<script>
angular.module('demo-app', [])
  .config(function ($interpolateProvider) {
      $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
  })
  .directive('bindAngularScope', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              for (k in scope) {
                  if (!element[0][k]) {
                      element[0][k] = scope[k];
                  }
              }
          }
      }
  })
  .controller('DemoController', function ($scope) {
      $scope.text = '';
      $scope.clickMe = function () {
          $scope.text += '\nyou clicked me!!';
          $scope.$apply();
      };
      $scope.mouseOver = function () {
          $scope.text += '\nyou hovered me!!';
          $scope.$apply();
      }
  });
</script>

This is not working.Could you point out me the issue or Is there is any solution for binding custom events(multiple) ? Do we need to create a custom directive for each of them ?

Note:

The above code is referred from the following url,

How to bind custom events in AngularJS?

Thanks in advance!

The Run code snippet itself not working. Please look at the answer provided by 'Mohammad Walid' and is that a better solution to follow ? — Vignesh Ramasamy, Mar 08 '17 at 07:55

score 0 · Answer 1 · answered Mar 08 '17 at 12:51

angular.module('demo-app', [])
  .config(function ($interpolateProvider) {
      $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
  })
  .directive('bindAngularScope', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              for (k in scope) {
                  if (!element[0][k]) {
                      element[0][k] = scope[k];
                  }
              }

               elem.bind('click', function() {
                /* Place your click logic here * /
                 });
          }
      }
  })

How to bind multiple custom events in angularjs?

1 Answers1