Javascript 将父控制器方法传递给转移子指令

我试图从transcluding child指令的link函数访问父指令的controller方法，但没有成功。当我将子对象作为父对象模板的一部分包含或从父对象ng控制器传入时，它会起作用。在angular 1.4中不应该创建子范围吗

Javascript:

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

app.controller('AppController', function($scope) {
  $scope.ctrlFn = function() {
    alert('hello');
  };
});

app.directive('outerDirective', function() {
  return {
    restrict: 'A',
    scope: {
      ctrlFn : '&'
    },
    controller: 'AppController',
    transclude:true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attributes) {
      scope.outerFunction = function() {

        scope.ctrlFn();
      };
    }
  };
});

app.directive('innerDirective', function() {
  return {
    scope: {
      ctrlFn : '&'
    },
    replace:true,
    template: '<button ng-click="innerFunction()">Child Directive</button>',
    link: function(scope, element, attributes) {
      scope.innerFunction = function() {

        scope.ctrlFn();
      };
    }
  };
});

var-app=angular.module（'app'，[]）；
app.controller（'AppController'，函数（$scope）{
$scope.ctrlFn=函数（）{
警惕（“你好”）；
};
});
app.directive（'outerDirective'，function（）{
返回{
限制：“A”，
范围：{
ctrlFn:“&”
},
控制器：“AppController”，
是的，
模板：“”，
链接：功能（范围、元素、属性）{
scope.outerFunction=函数（）{
scope.ctrlFn（）；
};
}
};
});
app.directive（'innerDirective'，function（）{
返回{
范围：{
ctrlFn:“&”
},
替换：正确，
模板：“子指令”，
链接：功能（范围、元素、属性）{
scope.innerFunction=函数（）{
scope.ctrlFn（）；
};
}
};
});

HTML:

问题 因为您将

作用域：{ctrlFn:'&'，}

放在

outerDirective

上，所以它会创建一个：

“隔离”作用域与普通作用域的不同之处在于它不典型地从其父作用域继承。这在创建可重用组件时非常有用，这些组件不应意外读取或修改父范围中的数据。请注意，没有

模板

或

模板URL

的隔离作用域指令不会将隔离作用域应用于其子元素

隔离作用域的一个用例是能够从链接函数中查看作用域上的

scope.$watch

表达式，这在指令没有模板的情况下也很有用。隔离作用域的另一个用途是为指令模板中的指令和插值（如果有）提供数据

然而，被排除在外的儿童忽略了这个范围。当您转包时，您会得到一个特殊值，该值专门忽略此隔离范围：

此范围是特殊的，因为它是指令范围的子范围（因此在指令范围被销毁时会被销毁），但它继承了从中获取它的范围的属性

这意味着传递给

链接的
范围
函数仅对模板可见。任何被排除的内容都将看到指令的父范围，并忽略隔离范围

解决方案
指令之间相互通信的一种方式是。require指令可以将容器指令的控制器注入到任何子函数的
链接中。此外，
require
通过DOM树而不是范围继承树搜索祖先。因此，当您需要控制器时，转置内容可以获得转置它的指令的控制器。例如，可以通过以下方式调整代码以使用控制器：

JavaScript:

var-app=angular.module（'app'，[]）；
app.controller（'AppController'，函数（$scope）{
$scope.ctrlFn=函数（）{
警惕（“你好”）；
};
});
app.directive（'outerDirective'，function（）{
返回{
限制：“A”，
范围：{
ctrlFn:“=”
},
控制器：函数OuterDirectiveController（$scope）{
this.outerFunction=函数（）{
返回$scope.ctrlFn（）；
};
},
是的，
模板：“”
};
});
app.directive（'innerDirective'，function（）{
返回{
替换：正确，
模板：“子指令”，
链接：函数（范围、元素、属性、outerDirective）{
scope.innerFunction=函数（）{
outerDirective.outerFunction（）；
};
},
作用域：{}，
要求：“^outerDirective”
};
});

注意：我还将
ctrlFn:'&'
更改为
ctrlFn:'='
，因为
'&'
用于在调用者中执行表达式。例如，当您执行类似于
的操作时。但是，您正在尝试将函数作为值传递，而不是尝试传递可执行的角度表达式

注意我在
innerDirective
上设置了
scope:{}
，但我将其保留为空。这向AngularJS表明我需要一个隔离作用域——我不想覆盖父作用域中的任何值。然后在我的链接函数中，我填充
scope.innerFunction
，这样我的模板就可以访问引用所需控制器的
innerFunction
。我也可以直接将控制器存储在示波器上，并为
innerDirective
保存一对LOC：

{
模板：“Child DirectiveIIRC”的内容是针对外部范围编译的，因此它无法访问一个被读取的直接值。如果可能的话，考虑将您的函数放入服务中。服务是在整个应用程序中共享功能的一种很好的方式。
<div id="app" ng-app="app">
  <div outer-directive ctrl-fn="ctrlFn">

    <div inner-directive ctrl-fn="ctrlFn()"></div>

  </div>
</div>