From d9de55de8d4d6e705ccd74acc157b9b08740ec16 Mon Sep 17 00:00:00 2001
From: aromero <aromero@digitalguardian.com>
Date: Sat, 24 Dec 2016 01:38:23 -0700
Subject: [PATCH] add controllerAs option, to make the cm work with component
 method

---
 README.md       |  8 ++++++++
 contextMenu.js  | 43 ++++++++++++++++++++++++++-----------------
 demo/demo.js    | 19 +++++++++++++++++++
 demo/index.html |  3 +++
 4 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 8d119eb..7192b75 100644
--- a/README.md
+++ b/README.md
@@ -105,6 +105,14 @@ Add your custom class to top element of the context menu
 <div context-menu="menuOptions" context-menu-class="custom_class"></div>
 ```
 
+## controllerAs
+
+If you are using controllerAs syntax in your controllers or if you are using Angular 1.5's component method, pass the controllerAs value to `cm-controller-as`
+
+```
+<my-component context-menu="$ctrl.menuOptions" cm-controller-as="$ctrl"></my-component>
+```
+
 ## Model Attribute (optional)
 
 In instances where a reference is not passed through the `$itemScope` (i.e. not using `ngRepeat`), there is a `model` attribute that can pass a value.
diff --git a/contextMenu.js b/contextMenu.js
index 6daefb3..78d10c2 100644
--- a/contextMenu.js
+++ b/contextMenu.js
@@ -182,23 +182,27 @@ angular.module('ui.bootstrap.contextMenu', [])
                 });
             };
 
-            $li.on('click', function ($event) {
-                if($event.which == 1) {
-                  $event.preventDefault();
-                  $scope.$apply(function () {
-                      if (nestedMenu) {
-                          openNestedMenu($event);
-                      } else {
-                          $(event.currentTarget).removeClass('context');
-                          removeContextMenus();
-
-                          if (angular.isFunction(item[1])) {
-                              item[1].call($scope, $scope, event, modelValue, text, $li);
-                          } else {
-                              item.click.call($scope, $scope, event, modelValue, text, $li);
-                          }
-                      }
-                  });
+            $li.on('click', function($event) {
+                if ($event.which == 1) {
+                    $event.preventDefault();
+                    $scope.$apply(function() {
+                        if (nestedMenu) {
+                            openNestedMenu($event);
+                        } else {
+                            $(event.currentTarget).removeClass('context');
+                            removeContextMenus();
+
+                            if (angular.isFunction(item[1])) {
+                                if (typeof($scope.cmControllerAs) === "string") {
+                                    item[1].call($scope[$scope.cmControllerAs], $scope[$scope.cmControllerAs], event, modelValue, text, $li);
+                                } else {
+                                    item[1].call($scope, $scope, event, modelValue, text, $li);
+                                }
+                            } else {
+                                item.click.call($scope, $scope, event, modelValue, text, $li);
+                            }
+                        }
+                    });
                 }
             });
 
@@ -301,6 +305,11 @@ angular.module('ui.bootstrap.contextMenu', [])
 
     return function ($scope, element, attrs) {
         var openMenuEvent = "contextmenu";
+        
+        if (attrs.cmControllerAs && typeof(attrs.cmControllerAs) === "string") {
+            $scope.cmControllerAs = attrs.cmControllerAs;
+        }
+
         if(attrs.contextMenuOn && typeof(attrs.contextMenuOn) === "string"){
             openMenuEvent = attrs.contextMenuOn;
         }
diff --git a/demo/demo.js b/demo/demo.js
index 3ff142d..e0ca374 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,6 +1,25 @@
 // Demo App
 angular.module('app', ['ui.bootstrap.contextMenu'])
 
+.component('demoComponent', {
+    template: `<button class="btn btn-default"
+            context-menu="$ctrl.otherMenuOptions"
+            cm-controller-as="$ctrl"
+            model="'Red'">Component Right Click</button>`,
+    controller: function() {
+        this.otherMenuOptions = [
+            ['Favorite Color', function ($itemScope, event, modelValue, text, $li) {
+                alert(modelValue);
+                console.info($itemScope.otherMenuOptions[0]);
+                console.info(event);
+                console.info(modelValue);
+                console.info(text);
+                console.info($li);
+            }]
+        ];
+    }
+})
+
 .controller('DemoController', [
     '$scope',
     function ($scope) {
diff --git a/demo/index.html b/demo/index.html
index d20f88e..ba24db8 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -26,6 +26,9 @@
             context-menu="otherMenuOptions"
             model="'Red'">Right Click</button>
 
+    <br/>
+    <br/>
+    <demo-component></demo-component>
     <br/>
     <br/>
     <button class="btn btn-default"