Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can an angular directive require its own controller?

This is a simple question but I can't seem to find any relevant documentation...

I'm trying to find out if an angular directive can both inherit a parent controller as well as its own. Consider the following examples:

Simple Inheritance From Self

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    },
    link: function($scope, el, attrs, ctrl) {
        // ctrl now contains `doSomething`
    }
  }
});

Inheritance From Parent

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: '^screen',
    link: function($scope, el, attrs, ctrl) {
        // ctrl now contains `doSomething` -- inherited from the `screen` directive
    }
  }
});

There's even multiple inheritance...

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: ['^screen','^anotherParent'],
    link: function($scope, el, attrs, ctrl) {
        // ctrl[0] now contains `doSomething` -- inherited from the `screen` directive
        // ctrl[1] now contains the controller inherited from `anotherParent`
    }
  }
});

What I can't figure out is how to make a directive inherit both a parent controller and its own. Like so:

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: '^screen',
    controller: function($scope) {
       // isolated widget controller
    },
    link: function($scope, el, attrs, ctrl) {
        // I need the `screen` controller in ADDITION to the isolated widget controller accessible in the link
    }
  }
});

Is this possible/proper form (or is it some kind of anti-pattern I am unaware of)?

like image 917
Julian Avatar asked Jul 24 '14 05:07

Julian


People also ask

Which directive is used for controller in Angular?

AngularJS ng-controller Directive The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element. In AngularJS this object is called a scope.

What is the difference between AngularJS directives and controllers?

A controller is usually used to contain and maintain the logic for your view, which gets bound to your view via $scope. A directive is something that you might use repeatedly and is called in your view directly through the directive name which you can pass in as an attribute.

What is the difference between controller and link in directives?

Answer:The link option is just a shortcut to setting up a post-link function. controller: The directive controller can be passed to another directive linking/compiling phase. It can be injected into other directices as a mean to use in inter-directive communication.

Does Angular have controller?

AngularJS ControllersAngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.

Can AngularJS custom directives have controllers?

AngularJS Custom Directive’s can have controllers. Controllers in Directive’s are used for inter-directive communication. This post discusses Directive’s controller, require option and controller argument in directive’s link function. Lets get started. This post is a part of AngularJS Directives Tutorial Series.

What is the difference between a directive and an ngcontroller?

When a Directive requires a Controller, it is only requiring a "directive controller". The directive doesn't have any access to the ngController-based controllers. The only thing that a directive and an ngController has is that they share (or at least share by default) the same $scope reference.

What are directdirectives in angular?

Directives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see. See the live example / download example for a working example containing the code snippets in this guide.

Can I require my own directive in a link function?

In case you do not have require key defined in your directive, but your link function contains controller as 4th argument, in that case the controller will refer to your directive’s own controller, or undefined if there is no controller defined in your directive. You CAN require your own directive.


1 Answers

Well that turned out to be a lot more obvious than I thought... a little trial and error showed that a directive can actually require itself as well.

The proper way to inherit parent + local controllers seems to be:

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: ['^screen','widget'],
    controller: function($scope) {
       this.widgetDoSomething = function() {
       };
    },
    link: function($scope, el, attrs, ctrl) {
        // ctrl[0] contains the `screen` controller
        // ctrl[1] contains the local `widget` controller
    }
  }
});
like image 173
Julian Avatar answered Oct 09 '22 07:10

Julian