How to call a directive from an another directive in AngularJS?

Question

I have just started using AngularJS. Is there a way to use a directive from an another directive ? I would like to add new <div time></div> on click on the parent.

EDIT : index.html

<div class="time" addtime ng-click="addTime()">
  <!-- ADD NEW <div resizable draggable ...></div> from directive 'time' HERE -->
</div>

EDIT : directive.js

dragDirectives.directive('addtime', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {

    },
    controller: function addtimeCtrl($scope, $element){
      $scope.addTime = function() {
        // ADD NEW <div resizable draggable ...></div> from directive 'time'
      };
    }
  }
});

dragDirectives.directive('time', function() {
  return {
    restrict: 'A',
    template: '<div resizable draggable class="duree" ng-class="{\'resize-active\': isResizeActive, \'drag-active\': isDragActive }" ng-style="{ width: myWidth, left: myLeft }">',
    link: function(scope, element, attr) {

    }
  }
});

Can you post example in Fiddle? generally you can use `require: '^parent',` option — Maxim Shoustin, Apr 15 '14 at 11:56

score 1 · Accepted Answer · edited May 23 '17 at 12:05

With Angular you do not do DOM-related or jQuery-ish stuff (i.e. addEventListener). The approach would be:

Have a model describe the <div time> elements you have, e.g.:
```
scope.timeElements = [];
```

Itarate over it in the template:

<div time ng-repeat="t in timeElements"></div>

Handle the event by manipulating the model, e.g.:

(HTML)

<div class="time" addtime ng-click="addTime()">

(JS)

scope.addTime = function() {
    scope.timeElements.push(something);
};

This is only an outline for a real solution, as many details are still missing, but you should get the idea. A fiddle would help getting more specific.

Also check out this.

Can you check my update please ? I changed my approach. – Steffi Apr 15 '14 at 14:24 — Steffi, Apr 15 '14 at 14:24

score 1 · Answer 2 · answered Apr 15 '14 at 12:29

require: '^parent' // a better way to go

dragDirectives.directive('addtime', function() {
  return {
    restrict: 'A',
    template: '<div time ng-repeat="t in timeElements"></div>',
    link: function(scope, element, attr, ctrl) {
      scope.timeElements = [1, 2, 3]
    },
    controller: function addtimeCtrl($scope) {
      this.addTime = function() {
        $scope.timeElements.push($scope.timeElements.length + 1);
      };
    }

  }
});

dragDirectives.directive('time', function() {
  return {
    restrict: 'A',
    require: '^addtime',
    template: '<div ng-click="addTime()">time</div>',
    link: function(scope, element, attr, ctrl) {
      scope.addTime = ctrl.addTime;
    }
  }
});

How to call a directive from an another directive in AngularJS?

2 Answers2