如何在AngularJS中从另一个指令调用指令？

Question

我刚开始使用AngularJS。有没有办法从另一个指令中使用指令？ 我希望在单击父级时添加新的<div time></div>。

编辑：index.html

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

编辑 : 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) {

    }
  }
});

- Steffi

---

你能在Fiddle上发个例子吗？通常你可以使用require: '^parent'选项。 - Maxim Shoustin

Answer 1

使用Angular时，您不需要进行与DOM相关或类似于jQuery的操作（例如addEventListener）。方法如下：

• 创建一个模型来描述你拥有的<div time>元素，例如:

  scope.timeElements = [];
  

• 在模板中迭代它：

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

• 通过操作模型来处理事件，例如:

  (HTML)

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

  (JS)

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

这只是一个真实解决方案的概述，仍有许多细节缺失，但您应该能够理解。一个演示将有助于变得更具体。

还要查看this。

- Nikos Paraskevopoulos

---

你能帮我检查一下我的更新吗？我改变了我的方法。 - Steffi

Answer 2

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;
    }
  }
});

- Justin Obney

---

谢谢，你的回答帮了我很多。 - Steffi