Merge pull request #2 from fixate/master

Made directive bindable to models and interpolated text, removed markup generating code.

Author: lisposter

README.md

@@ -23,48 +23,37 @@ angular.module('demo', ['angular.zeroclipboard']).
       swfPath: '../bower_components/zeroclipboard/ZeroClipboard.swf'
     });
 
-    // set directive options
-    uiZeroclipConfigProvider.setOptions({
-      buttonText: 'Copy Me!'
-    });
-
   }]);
 ```
 
 
 ## Config
 
-* `uiZeroclipConfigProvider.setZcConf({})` Config the ZeroClipboard
+Configuration passed into `ZeroClipboard.config`
+
+* `uiZeroclipConfigProvider.setZcConf({
+    moviePath: '../path/to/ZeroClipboard.swf'
+* })`
 
 The params is an object. and just same as [ZeroClipboard official config](https://github.com/zeroclipboard/zeroclipboard/blob/1.x-master/docs/instructions.md)
 
-* `uiZeroclipConfigProvider.setOptions()` Config this directive Config
+## Usage
 
-```js
-{
-    // set the button class
-    buttonClass: '',
-
-    // 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,
-    mouseout: null,
-    mousedown: null,
-    mouseup: null,
-    complete: null,
-    noflash: null,
-    wrongflash: null,
-    dataRequested: null
-}
+Example using a two-way model binding
+
+```html
+<input type="text" ng-model="myText" />
+<button ui-zeroclip zeroclip-copied="copied=true" zeroclip-model="myText">Copy</button>
+<span ng-show="copied">Text Copied!</span>
+```
+
+Example using interpolated text:
+
+```html
+<input type="text" ng-model="myText" />
+<button ui-zeroclip zeroclip-copied="copied=true"
+        zeroclip-text="This was your text: {{ myText }}">Copy</button>
+<span ng-show="copied">The sentence "This was your text: {{ myText }}" was copied!</span>
 ```
 
 ## LICENSE

bower.json

@@ -1,14 +1,15 @@
 {
   "name": "angular-zeroclipboard",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "Angular Wrapper for ZeroClipboard",
   "main": "src/angular-zeroclipboard.js",
   "keywords": [
     "angular",
     "zeroclipboard"
   ],
   "authors": [
-    "Leigh Zhu"
+    "Leigh Zhu",
+    "Stan Bondi"
   ],
   "ignore": [
     "**/.*",
@@ -24,6 +25,6 @@
   "homepage": "http://github.com/lisposter/angular-zeroclipboard",
   "dependencies": {
     "angular": "~1.2.16",
-    "zeroclipboard": "~1.3.5"
+    "zeroclipboard": ">=2"
   }
 }

demo/demo.html

@@ -4,28 +4,27 @@
   <meta charset="UTF-8">
   <title>Angular ZeroClipboard</title>
   <script src="../bower_components/angular/angular.js"></script>
-  <script src="../bower_components/zeroclipboard/ZeroClipboard.min.js"></script>
+  <script src="../bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
   <script src="../src/angular-zeroclipboard.js"></script>
   <script>
-  angular.module('demo', ['angular.zeroclipboard']).
+  angular.module('demo', ['zeroclipboard']).
   config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
 
     // config ZeroClipboard
     uiZeroclipConfigProvider.setZcConf({
-      moviePath: '../bower_components/zeroclipboard/ZeroClipboard.swf'
-    });
-
-    // set directive options
-    uiZeroclipConfigProvider.setOptions({
-      buttonText: 'Copy Me!',
-      emitEvent: true
+      swfPath: '../bower_components/zeroclipboard/dist/ZeroClipboard.swf'
     });
 
   }]).
   controller('demoCtrl', ['$scope', function($scope) {
-    $scope.$on('ZeroClipboard.complete', function() {
-      console.log('copy complete');
-    })
+    $scope.complete = function(e) {
+      console.log('copy complete', e);
+      $scope.copied = true
+    };
+
+    $scope.$watch('input', function(v) {
+      $scope.copied = false
+    });
   }]);
   </script>
 </head>
@@ -34,10 +33,20 @@
 <h1>Angular ZeroClipboard Demo</h1>
 
 <form action="">
-  <label for="">input: <input type="text" ui-zeroclip ng-model="input"></label>
+  <div>
+    <h1>Copy from input</h1>
+    <label for="">input: <input type="text" ng-model="input" id="input1"></label>
+    <button ui-zeroclip zeroclip-copied="complete($event)" zeroclip-model="input" >Copy</button>
+    <span ng-show="copied">Copied!</span>
+  </div>
 
-  <label for="">textarea: <textarea cols="30" rows="10" ui-zeroclip ng-model="textarea"></textarea></label>  
+  <div>
+    <h1>Copy interpolated text</h1>
+    <span>This will copy: "This input text: {{ input }}"</span>
+    <button ui-zeroclip zeroclip-copied="copiedText=true" zeroclip-text="This input text: {{ input }}" >Copy</button>
+    <span ng-show="copiedText">Copied!</span>
+  </div>
 </form>
-  
+
 </body>
-</html>
+</html>

src/angular-zeroclipboard.js

@@ -1,5 +1,5 @@
-angular.module('angular.zeroclipboard', []).
-provider('uiZeroclipConfig', function() {
+angular.module('zeroclipboard', [])
+  .provider('uiZeroclipConfig', function() {
     // default configs
     var _zeroclipConfig = {
         buttonClass: '',
@@ -15,62 +15,57 @@ provider('uiZeroclipConfig', function() {
         hoverClass: "zeroclipboard-is-hover",
         activeClass: "zeroclipboard-is-active"
     };
-    var _options = {
-        buttonClass: '',
-        buttonText: 'Copy',
-        emitEvent: false
-    };
     this.setZcConf = function(zcConf) {
-        angular.extend(_zeroclipConfig, zcConf);
-    };
-    this.setOptions = function(options) {
-        angular.extend(_options, options);
+      angular.extend(_zeroclipConfig, zcConf);
     };
     this.$get = function() {
-        return {
-            zeroclipConfig: _zeroclipConfig,
-            options: _options
-        }
+      return {
+        zeroclipConfig: _zeroclipConfig
+      }
     };
-}).
-directive('uiZeroclip', ['$document', '$window', 'uiZeroclipConfig',
-    function($document, $window, uiZeroclipConfig) {
+  })
+
+  .directive('uiZeroclip', ['$document', '$window', 'uiZeroclipConfig',
+      function($document, $window, uiZeroclipConfig) {
+
         var zeroclipConfig = uiZeroclipConfig.zeroclipConfig || {};
-        var options = uiZeroclipConfig.options;
-        var _id = 0;
+        var ZeroClipboard = $window.ZeroClipboard
 
-        function insertAfter(newNode, referenceNode) {
-            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
-        }
         return {
-            priority: 10,
-            link: function(scope, elm, attrs) {
-                // config
-                ZeroClipboard.config(zeroclipConfig);
-                var btn = elm[0];
-                if (!attrs.id) {
-                    attrs.$set('id', 'uiZeroclip' + _id);
-                    btn = document.createElement('button');
-                    btn.appendChild(document.createTextNode(options.buttonText));
-                    btn.setAttribute('data-clipboard-target', 'uiZeroclip' + _id);
-                    btn.setAttribute('class', options.buttonClass);
-                    _id++;
-                    insertAfter(btn, elm[0]);
-                }
-                if (angular.isFunction(ZeroClipboard)) {
-                    scope.client = new ZeroClipboard(btn);
-                }
-                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]);
-                    }
-                })
+          scope: {
+            onCopied: '&zeroclipCopied',
+            client: '=?uiZeroclip',
+            value: '=zeroclipModel',
+            text: '@zeroclipText'
+          },
+          link: function(scope, element, attrs) {
+            // config
+            ZeroClipboard.config(zeroclipConfig);
+            var btn = element[0];
+
+            if (angular.isFunction(ZeroClipboard)) {
+              client = scope.client = new ZeroClipboard(btn);
             }
+
+            scope.$watch('value', function(v) {
+              if (v == undefined) { return; }
+              element.attr('data-clipboard-text', v);
+            });
+
+            scope.$watch('text', function(v) {
+              element.attr('data-clipboard-text', v);
+            });
+
+            client.on('aftercopy', _completeHnd = function(e) {
+              scope.$apply(function() {
+                scope.onCopied({$event: e});
+              });
+            });
+
+            scope.$on('$destroy', function() {
+              client.off('complete', _completeHnd)
+            });
+          }
         }
-    }
-]);
+      }
+  ]);