Question

In this plunk我有两个指令，父母和孩子。 child指令有一个变量scope.var和一个递增它的方法。我想从父指令调用此方法。最好的方法是什么？

注意：我不想$播放一个活动。

Answer 1

这是一个有效的Plunker。

var app = angular.module('app', []);

app.directive('parent', function() {
    return {
        restrict: 'E',
        template: "<button ng-click='increment()'>increment</button>" + "<br/><child />"
    }
});


app.directive('child', function() {
    return {
        restrict: "E",
        template: "{{var}}",
        controller: ["$scope", function($scope) {
            $scope.var = 0;
            $scope.increment = function() {
                $scope.var++;
            };
        }]
    };
});

Answer 2

如果您需要让您的孩子指示做可以使用的事情，观察者，观察者或事件

//using observe
attrs.$observe('increment',function(){
 scope.increment()
});

//using events
scope.$on('incrementChild',function(){
  scope.increment()
});

http://plnkr.co/edit/LJr38fFpuUl48orZOKHa?p=preview

检查这个plunker是你自己代码的分支

Answer 3

将控制器添加到父指令，并从您的孩子那里获取它。这样孩子就会让父母知道它的存在。

这是在组件中创建API的正确方法。我们可以通过删除范围来做得更好。

父：

directive.link = function(scope, element, attrs) {
      scope.callIncrement = function () {
        // invoke increment function in child directive
        scope.childs.forEach(function (child) {
          child.increment();
        });
      };
};
directive.controller = function ($scope) {
  //debugger;
  $scope.childs = [];
  this.addChild = function (child) {
    $scope.childs.push(child);
  };
};

子：

directive.require = '^parent';
directive.link = function(scope, element, attrs, parentCtrl) {
scope.var = 0;

scope.increment = function() {
      scope.var++;
};

parentCtrl.addChild(scope);
};

Plnkr：http://plnkr.co/edit/nGiPnm3k8RzvvQhMFJ7L?p=preview

Angular：从父指令调用子指令中的方法

3 个答案: