create "nested" ng-click inside of Angular Directive

Question

I have a directive which open up a bootstrap-tours on call of t.start():

   app.directive('tourGuide', function ($parse, $state) {
           var directiveDefinitionObject = {
               restrict: 'E',
               replace: false,
               link: function (scope, element, attrs) {
                   var t = new Tour({container: $("#main"),
                        backdrop: false,
                        debug:true
                    });
                    t.addStep({
                        element: "#main",
                        title: "Title123",
                        content: "Content123"
                    });
                    t.init();
                     t.start();                 
               }};
        return directiveDefinitionObject;
    });

I want to create a button which on click could call variable t.start(). Is it even possible? I want to achieve this so could be independent of functions inside controllers, because this directive will be on every single view of the application, so it would be nice if it could call a parameter inside itself. Ive tryed to create a template in directive with a button, and add a ng-clikc action with t.start() and ofcourse it failed because variable t is not known to controller where ever my directive is.

EXAMPLE:

Lets say i have 2 views ShowItems and CreateItem they have 2 dirfferent controllers. in those views i have 1 button/link, on click of it i want to show my TourGuide. Thats simple.

Now in my TourGuide i have 2 different Steps, and when i press on a button in CreateItem view i want to see the step in Tour Guide for CreateItem view, and vise versa.

Thats simple if i use functions inside my controller. But is it possible to use directive ONLY, because i could have 20 different controllers?

Could you provide an mock of what you want the directive to generate? I'm not sure the desired result is clear to me based on the question. — drew_w
– drew_w, Commented Feb 18, 2014 at 17:15

drew_w · Accepted Answer · 2014-02-18 17:43:10Z

1

Based on a few assumptions - I assume what you want here is to dynamically call a routine in scope from a directive. Take the following code as an example

HTML/View Code

<div my-directive="callbackRoutine">Click Here</div>

Controller

function MyController($scope) {
    $scope.callbackRoutine = function () {
       alert("callback");
    };
}

Directive

app.directive("myDirective", function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr){
      element.bind('click', function (){
        if (typeof scope[attr.myDirective] == "function"){
          scope[attr.myDirective]();
        }
      });
    }
  };
});

In this, you specify the callback routine as part of the directive. The key to the equation is that the scope for the directive inherits from any parent scope(s) which means you can call the routine even from the scope passed to the directive. To see a working example of this, see the following plunkr: http://plnkr.co/edit/lQ1QlwwWdpNvoYHlWwK8?p=preview. Hope that helps some!

answered Feb 18, 2014 at 17:43

drew_w

10.5k4 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timsen Over a year ago

Thanks for the answer, i updated my question with an example. I want to avoid using Controller if that is possible because else i have 20 different controllers to take care of if there will be some kind of update.

drew_w Over a year ago

I'll leave my original answer - though it isn't quite the right answer. Something that might help a bit more is using the angular boostrap modal as an example: mgcrea.github.io/angular-strap/##modals. This provides the option of providing a template - which is what you want. Since this is open source you can look at the code. You could also even just use this directly within your project. Best of luck!

Timsen Over a year ago

ive got it now, i just create a function inside of my directive, and make a button which calls that function, which make it flexible. Thanks for the help

Collectives™ on Stack Overflow

create "nested" ng-click inside of Angular Directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related