如何将指令内部的函数传递给另一个指令

Question

我有两个独立的指令。如果某些条件被评估为 true 我必须先调用第二个指令。

myDirectives.directive('first', function() {
  return {
    restrict: "E",
    templateUrl: "Views/_first.html",
    require: "ngModel",
    scope: {
      functiontocall: "&",
    }
  }
});

在 HTML 中，我调用指令如下：

<first ng-model="model.FirstDTO" 
       functiontocall="someFunctionForAsyncData(val)"></first>

第二条指令相同，只是 html 和传递的函数不同。我省略了传递给指令的其他数据，这对我当前的问题并不重要。

现在，我必须首先在内部调用第二个指令，所以我添加了传递给第一个指令的附加函数：

myDirectives.directive('first', function() {
  return {
    restrict: "E",
    templateUrl: "Views/_first.html",
    require: "ngModel",
    scope: {
      functiontocall: "&",
      functionforseconddirective: "&"
    }
  }
});

我怎样才能在我的第一个指令中做如下这样的事情，将传递给第一个指令的函数传递给另一个指令（现在不工作）：

<second ng-model="secondModel" 
        secondFn="functionforseconddirective(val)"></second>

只是说明这是嵌套这两个指令的特殊情况，我在代码中有几个地方分别调用它们，所以我想解决这个特定情况，但不影响所有正常情况在代码中它们都可以正常工作的地方。

更新：jsfiddler：http://jsfiddle.net/kujg10fL/1/ 我希望点击第二个按钮显示预期的消息

Answer 1

嗯。您现在确实显示了足够的信息来创建一个完全合格的答案。我认为 functionforseconddirective() 是在您的控制器中定义的。这样你就不需要将这个函数从一个指令解析到另一个指令。你需要一个 trigger 并且你需要将 value 从 on 指令解析为 enougher 就像这样 demo fiddle.

查看

<div ng-controller="MyCtrl">
  <input href="javascript:void(0);" 
         my-directive trigger="trigger" 
         my-value="someValue" />

  <div my-other-directive 
       fn="myTriggerFunction" 
       my-value="someValue" 
       trigger="trigger"></div>
</div>

AngularJS申请

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

myApp.controller('MyCtrl', function ($scope) {

    $scope.trigger = false;
    $scope.someValue = '';

    $scope.myTriggerFunction = function (value) {
      console.log(value);
    };
});

myApp.directive('myDirective', function () {
    return {
      restrit: 'A',
      scope: {
        trigger: "=",
        myValue: "="
      },
      link: function (scope, element, attrs) {
          element.on('keyup', function () {
            scope.myValue = 'hello world';
            scope.trigger = true;
            scope.$apply();
          });
      }
    }
});

myApp.directive('myOtherDirective', function () {
    return {
      restrit: 'A',
      scope: {
        trigger: "=",
        myValue: "=",
        fn: "="
      },
      link: function (scope, element, attrs) {
          scope.$watch('trigger', function (newValue, oldValue) {

            if (newValue) {

              //call controller function
              scope.fn(scope.myValue);

              //unset trigger
              scope.trigger = false;
              scope.$emit();
            }
          });
      }
    }
});

根据您的 fiddle

更新了答案

请检查这个demo fiddle。

查看

<div ng-app="dr" ng-controller="testCtrl">
    <test firstfn="someFn"></test>   
</div>

AngularJS申请

var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
    $scope.someFn = function(msg) {        
        alert(msg.msg);
    }
});
app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            firstfn: '='
        },
        template: "<div><button ng-click='firstfn({msg:\"Hello World!\"})'>Click</button><br /> <testinner secondfn='firstfn'></testinner> </div>",
        replace: true,        
        link: function(scope, elm, attrs) {     
           console.log(scope.firstfn);
        }
    }
});
app.directive('testinner', function() {
    return {
        restrict: 'E',
        scope: {
            secondfn: '='
        },
        template: "<div>second directive<button ng-click='secondfn({msg:\"Hello World from another!\"})'>Click</button></div>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

如何将指令内部的函数传递给另一个指令

How pass function inside directive to another directive

using-directives

angularjs

angularjs-directive

angular-directive

查看

AngularJS申请

根据您的 fiddle

查看

AngularJS申请