如何在angularjs中绑定多个自定义事件?

问题描述:

我需要绑定在angularjs自定义事件(1.x中)和我试着用下面的代码,如何在angularjs中绑定多个自定义事件?

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> 

这不是working.Could你指出我的问题或是否有任何解决方案绑定自定义事件(多)?我们是否需要为每个人创建自定义指令?

注:

上面的代码是从以下网址提到,提前

How to bind custom events in AngularJS?

谢谢!

+1

什么是错误?为什么它不起作用?分享一些代码 –

+0

运行代码片段本身不起作用。请看“*瓦利德”提供的答案,这是更好的解决方案吗? –

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