Angular Ui Bootsrap `dropdown` interfering with my directive require

Question

In angular.js, I use require: "^helpme", to inherit a directive's controller in my directive called actionButton...

angular.module("main.vips").directive("actionButton",
        function(LoadbalancerActionButtonService, VipActionButtonService,
                 NodeActionButtonService, StatusTrackService) {

            //get function arguements/services and make them
            //accessable for use
            var args = Array.prototype.slice.call(arguments);
            var services = {};
            args.map(function(service) {
                //not all services may return objects 
                if (Object(service) === service) {
                    services[Object.keys(service)] = service[Object.keys(
                        service)];
                }
            });

          return {
            templateUrl: "vips/directives/action_button.html",
            restrict: "AE",
            replace: true,
            require: "^helpme",
            transclude: false,
            scope: {
              label: "@?",
              icon: "@?",
              type: "@?",
              actions: "=?"
            },
            link: function(scope, element, attrs) {
              return scope.actions = services[attrs.type];
              scope.$on('CREATE', function () {
                  console.log("create");
              });
            }
          }
});

With this template that uses Angular UI Bootstrap dropdown directive:

directives/action_button.html:

<div helpme class="btn-group action-button-icon" dropdown>
  ....
</div>

How directive is applied:

      <div id="{{vip.label}}" action-button type="vip" icon="glyphicon glyphicon-pencil" actions="actions.vips"
           class="pull-right"></div>

I get Error: [$compile:ctreq] Controller 'helpme', required by directive 'dropdown', can't be found!.

This makes no sense because because I am requiring helpme directive in actionButton directive.

Is this a bug? Any way I can require other directives in actionButton directive and still use Angular UI Bootstrap's dropdown in actionButton template?

Where are you defining your controller? and is it being properly included in your app? — Tony, Aug 12 '14 at 21:18
For `require: "^helpme"`, I am defining the controller in the directive called `helpme`. But the dropdown directive should not have any concern of it when I require it in directive `actionButton`. — dman, Aug 12 '14 at 21:23
You're telling your directive that it needs a controller called `helpme`. The directive isn't defining it. The error message says it can't be found. Look here: http://stackoverflow.com/questions/15672709/how-to-require-a-controller-in-an-angularjs-directive — Tony, Aug 12 '14 at 21:26
I am telling directive `actionButton` that is needs a controller called `helpme`, not `dropdown`. But it is `dropdown` that is complaining `Controller 'helpme', required by directive 'dropdown'` — dman, Aug 12 '14 at 21:28

Angular Ui Bootsrap `dropdown` interfering with my directive require

0 Answers0