feature: config to choose emit angualr event.

lisposter · lisposter · commit 6ad1f03ebf2c · 2014-05-16T09:39:48.000+08:00
bugfix: duplicate create clip client
docs: update for 'emitEvent' config
diff --git a/README.md b/README.md
@@ -48,6 +48,12 @@ The params is an object. and just same as [ZeroClipboard official config](https:
     // set button's Text
     buttonText: 'Copy',
 
+    // set `true`, then when trigger an event by clipboard, it will emit an angular event by .$emit()
+    // then you can listen the angular type event in your controller.
+    // the event which be emited will bt like: 'ZeroClipboard.[eventType]', for example: 'ZeroClipboard.complete'
+    // ATTENTION: if you set this to true, the callback functions you set below will be ignored.
+    emitEvent: true,
+
     // set the callback function of the events which ZeroClipboard dispataches
     load: null,
     mouseover: null,
@@ -63,6 +69,8 @@ The params is an object. and just same as [ZeroClipboard official config](https:
 
 ## LICENSE
 
+MIT LICENSE
+
 Copyright (C) 2014 lisposter(Leigh Zhu)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
diff --git a/demo/demo.html b/demo/demo.html
@@ -2,7 +2,7 @@
 <html lang="en" ng-app="demo">
 <head>
   <meta charset="UTF-8">
-  <title>Angular ZeroClipBoard</title>
+  <title>Angular ZeroClipboard</title>
   <script src="../bower_components/angular/angular.js"></script>
   <script src="../bower_components/zeroclipboard/ZeroClipboard.min.js"></script>
   <script src="../src/angular-zeroclipboard.js"></script>
@@ -17,20 +17,26 @@
 
     // set directive options
     uiZeroclipConfigProvider.setOptions({
-      buttonText: 'Copy Me!'
+      buttonText: 'Copy Me!',
+      emitEvent: true
     });
 
+  }]).
+  controller('demoCtrl', ['$scope', function($scope) {
+    $scope.$on('ZeroClipboard.complete', function() {
+      console.log('copy complete');
+    })
   }]);
   </script>
 </head>
-<body>
+<body ng-controller="demoCtrl">
 
 <h1>Angular ZeroClipboard Demo</h1>
 
 <form action="">
   <label for="">input: <input type="text" ui-zeroclip ng-model="input"></label>
 
-  <label for="">textarea: <textarea name="" id="" cols="30" rows="10" ui-zeroclip ng-model="textarea"></textarea></label>  
+  <label for="">textarea: <textarea cols="30" rows="10" ui-zeroclip ng-model="textarea"></textarea></label>  
 </form>
   
 </body>
diff --git a/src/angular-zeroclipboard.js b/src/angular-zeroclipboard.js
@@ -1,5 +1,5 @@
-angular.module('angular.zeroclipboard', []).provider('uiZeroclipConfig', function() {
-
+angular.module('angular.zeroclipboard', []).
+provider('uiZeroclipConfig', function() {
     // default configs
     var _zeroclipConfig = {
         buttonClass: '',
@@ -18,27 +18,16 @@ angular.module('angular.zeroclipboard', []).provider('uiZeroclipConfig', functio
     var _options = {
         buttonClass: '',
         buttonText: 'Copy',
-        load: null,
-        mouseover: null,
-        mouseout: null,
-        mousedown: null,
-        mouseup: null,
-        complete: null,
-        noflash: null,
-        wrongflash: null,
-        dataRequested: null
+        emitEvent: false
     };
-
     this.setZcConf = function(zcConf) {
         angular.extend(_zeroclipConfig, zcConf);
     };
-
     this.setOptions = function(options) {
         angular.extend(_options, options);
     };
-
-    this.$get = ['$rootScope',
-        function($rootScope) {
+    this.$get = [
+        function() {
             return {
                 zeroclipConfig: _zeroclipConfig,
                 options: _options
@@ -50,16 +39,14 @@ directive('uiZeroclip', ['$document', '$window', 'uiZeroclipConfig',
     function($document, $window, uiZeroclipConfig) {
         var zeroclipConfig = uiZeroclipConfig.zeroclipConfig || {};
         var options = uiZeroclipConfig.options;
-        var copyBtns = [];
         var _id = 0;
 
         function insertAfter(newNode, referenceNode) {
             referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
         }
         return {
             priority: 10,
-            require: 'ngModel',
-            link: function(scope, elm, attrs, ngModel) {
+            link: function(scope, elm, attrs) {
                 // config
                 ZeroClipboard.config(zeroclipConfig);
                 if (!attrs.id) {
@@ -70,20 +57,20 @@ directive('uiZeroclip', ['$document', '$window', 'uiZeroclipConfig',
                     btn.setAttribute('class', options.buttonClass);
                     _id++;
                     insertAfter(btn, elm[0]);
-                    copyBtns.push(btn);
                 }
                 if (angular.isFunction(ZeroClipboard)) {
-                    scope.client = new ZeroClipboard(copyBtns);
+                    scope.client = new ZeroClipboard(btn);
                 }
-                scope.client.on('load', options.load);
-                scope.client.on('mouseover', options.mouseover);
-                scope.client.on('mouseout', options.mouseout);
-                scope.client.on('mouseup', options.mouseup);
-                scope.client.on('mousedown', options.mousedown);
-                scope.client.on('complete', options.complete);
-                scope.client.on('dataRequested', options.dataRequested);
-                scope.client.on('noflash', options.noflash);
-                scope.client.on('wrongflash', options.wrongflash);
+                var _events = ['load', 'mouseover', 'mouseout', 'mouseup', 'mousedown', 'complete', 'dataRequested', 'noflash', 'wrongflash'];
+                _events.forEach(function(evt) {
+                    if (options.emitEvent) {
+                        scope.client.on(evt, function() {
+                            scope.$emit('ZeroClipboard.' + evt);
+                        });
+                    } else {
+                        scope.client.on(evt, options[evt]);
+                    }
+                })
             }
         }
     }
