Change directive to work in a more angular way

Author: Stan Bondi

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/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
-    });
-
   }]).
   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,12 @@
 <h1>Angular ZeroClipboard Demo</h1>
 
 <form action="">
-  <label for="">input: <input type="text" ui-zeroclip ng-model="input"></label>
+  <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>
 
-  <label for="">textarea: <textarea cols="30" rows="10" ui-zeroclip ng-model="textarea"></textarea></label>  
+  <label for="">textarea: <textarea cols="30" rows="10" ui-zeroclip zeroclip-value-"textarea" ng-model="textarea"></textarea></label>
 </form>
-  
+
 </body>
-</html>
+</html>

src/angular-zeroclipboard.js

@@ -1,76 +1,65 @@
-angular.module('angular.zeroclipboard', []).
-provider('uiZeroclipConfig', function() {
+angular.module('zeroclipboard', [])
+  .provider('uiZeroclipConfig', function() {
     // default configs
     var _zeroclipConfig = {
-        buttonClass: '',
-        moviePath: "ZeroClipboard.swf",
-        trustedDomains: [window.location.host],
-        cacheBust: true,
-        forceHandCursor: false,
-        zIndex: 999999999,
-        debug: true,
-        title: null,
-        autoActivate: true,
-        flashLoadTimeout: 30000,
-        hoverClass: "zeroclipboard-is-hover",
-        activeClass: "zeroclipboard-is-active"
-    };
-    var _options = {
-        buttonClass: '',
-        buttonText: 'Copy',
-        emitEvent: false
+      buttonClass: '',
+      moviePath: "ZeroClipboard.swf",
+      trustedDomains: [window.location.host],
+      cacheBust: true,
+      forceHandCursor: false,
+      zIndex: 999999999,
+      debug: false,
+      title: null,
+      autoActivate: true,
+      flashLoadTimeout: 30000,
+      hoverClass: "zeroclipboard-is-hover",
+      activeClass: "zeroclipboard-is-active"
     };
     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'
+          },
+          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) {
+              element.attr('data-clipboard-text', v);
+            });
+
+            client.on('complete', function _completeHnd(e) {
+              scope.$apply(function() {
+                scope.onCopied({$event: e});
+              });
+            });
+
+            scope.$on('$destroy', function() {
+              client.off('complete', _completeHnd)
+            });
+          }
         }
-    }
-]);
+      }
+  ]);