Как связать несколько пользовательских событий в angularjs?

Question

Мне нужно связать пользовательские события в Angularjs(1.x), и я попытался с помощью следующего кода,

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>
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>

Это не работает. Не могли бы вы указать мне проблему или есть какое-либо решение для привязки пользовательских событий (несколько)? Нужно ли нам создавать собственные директивы для каждого из них?

Замечания:

Приведенный выше код ссылается на следующий URL,

Как связать пользовательские события в AngularJS?

Заранее спасибо!

Answer 1

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 * /
                 });
          }
      }
  })