0

Using AngularStrap. Invoking the $dropdown service from the controller does show the dropdown, but the click on the items does not invoke the respective code.

Plunk to demonstrate this.

http://plnkr.co/edit/tNAX7liFSNh71XcOUecs

var dropdown = $dropdown(element, {
            show: false,
            trigger: "manual",
            html: true
        });

  dropdown.$scope.content = [ 
      {
        "text": "<i class=\"fa fa-globe\"></i>&nbsp;Display an alert",
        "click": "alert(\"Holy guacamole!\")"
      },
      {
        "divider": true
      },
      {
        "text": "Separated link",
        "href": "#separatedLink"
      }
    ];

        element.on("contextmenu", function(event) {
          event.preventDefault();
          console.log("dropdown right click");
          scope.$apply(function() {
            scope.dropdown_show = true;
          });
        });
amahfouz
  • 2,328
  • 2
  • 16
  • 21

1 Answers1

1

The alert function you are trying to call should exist in the scope.

try to add below in your controller, just above where you set the content.

 dropdown.$scope.alert = function(str){
    alert(str)
 };
sdfacre
  • 1,273
  • 7
  • 7
  • Thanks. That did work for the alert. Funnily, even a console.log() in the click handler does not work. So what is the $scope for the dropdown in this case? Is it the scope of the wrapping ng-repeat element? – amahfouz Dec 30 '15 at 19:17
  • if you look into the source code, dropdown.tpl.html, it actually uses $eval to evaluate your click string. For more information about $eval, please read http://stackoverflow.com/questions/15671471/angular-js-how-does-eval-work-and-why-is-it-different-from-vanilla-eval. Regarding to the scope, you didn't pass your scope to it, so $dropdown created a new scope for itself. if you passed the current scope to it, it will create a new scope by extending the one you provided. – sdfacre Dec 31 '15 at 00:52