angularjs - 如何从 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) {

    }
  }
});

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

这只是真正解决方案的轮廓，因为仍然缺少许多细节，但您应该明白了。 fiddle 将有助于变得更具体。

另请查看this .