从transcluded内容中的访问指令的范围隔离 [英] Access directive's isolate scope from within transcluded content
问题描述
我不知道，如果这确实是可能的，但我想主要的反向'和;'在AngularJS隔离范围。这里是一个 Plunkr 证明。
I'm not sure if this is actually possible, but I'm essentially wanting a reverse of the '&' isolate scope in AngularJS. Here is a Plunkr to demonstrate.
基本上，我有一个自定义指令设置，提供一些重用的HTML。它利用 NG-transclude 的允许一些外部内容，以在它被渲染。然而，我发现了一个情况，我想访问已设立了指令的适用范围隔离功能，从code的transcluded部分中。
Basically, I have a custom directive set up that delivers some reusable HTML. It makes use of ng-transclude to allow some external content to be rendered within it. However, I have found a situation where I would like to access a function that has been set up on the isolate scope for the directive, from within the transcluded section of code.
所以基本上我有东西，看起来像：
So essentially I have something that looks like:
<div ng-controller="MainController">
<!-- The directive -->
<div some-custom-directive>
<!-- Button 1 that invokes a method within the controller scope -->
<button id="button1" ng-click="invoke1()">Invoke from Controller</button>
<!-- Button 2 that invokes a method on the isolate scope for the custom directive -->
<button id="button2" ng-click="invoke2()">Invoke from Isolate Scope</button>
</div>
</div>
有谁知道，如果这确实是可能的？
Does anyone know if this is indeed possible?
更新
根据@马克Rajcok的回答中， $$prevSibling 在 $范围发现可用于从transcluded内容中访问指令的分离范围。不过，我已经更新了上述Plunkr从一个 NG-重复指令，它不工作中尝试此。我假设重复中的项目不继承的范围。
As per @Mark Rajcok's answer, the $$prevSibling found on the $scope can be used to access the isolate scope of the directive from within the transcluded content. However, I have updated the above Plunkr to attempt this from within an ng-repeat directive, which does not work. I am assuming the items within that repeat do not inherit the scope.
推荐答案
虽然有可能，我的解决方案present是一个黑客，因为它采用了范围内部变量， $$prevSibling 。
Although possible, the solution I present is a hack, as it uses a scope internal variable, $$prevSibling.
在您的transcluded的内容，你是transcluded范围内。该指令的分离和transcluded范围是兄弟姐妹。从transcluded范围得到的隔离范围，你可以使用 $$prevSibling 。 （要从分离范围得到了transcluded范围，你可以使用 $$ nextSibling ）
Inside your transcluded content, you are inside the transcluded scope. The directive's isolate and transcluded scopes are siblings. To get from the transcluded scope to the isolate scope, you can use $$prevSibling. (To get from the isolate scope to the transcluded scope, you can use $$nextSibling.)
那么，这个技巧将工作：
So, this hack will work:
<a href="" ng-click="$$prevSibling.action()">Invoke the Directive Action</a>
要呼吁控制器范围的方法，你需要指定使用＆安培; 作为@ganaraj已经证明：
To call a method on the controller scope, you need to specify that using & as @ganaraj already demonstrated:
<content-presenter controller-action="action()">
然后在您的指令：
Then in your directive:
scope: { controllerAction: '&' },
template: ... +
'<button ng-click="controllerAction()">Trigger Ctrl action()</button>' ...
通过NG-重复（见塞缪尔的评论），每个项目创建transcluded范围的子范围。在下面的图片，我只展示一个项目来保持画面较小。反向$$prevSibling的$$ nextSibling棕色箭头。
With ng-repeat (see Samuel's comment), each item creates a child scope of the transcluded scope. In the picture below, I only show one item to keep the picture smaller. Reverse the $$nextSibling brown arrow for $$prevSibling.
所以黑客去的方法动作（）在从NG-重复子范围隔离范围定义为
So the hack to get to method action() defined on the isolate scope from an ng-repeat child scope is
<div ng-repeat="item in items" ng-click="$parent.$$prevSibling.action()">
更新为V1.3角+
由于角V1.3中，transcluded范围现在是指令的范围分离ndash的和一个孩子;他们不再是兄弟姐妹。因此，从transcluded范围才能到隔离范围，使用 $父。
Since Angular v1.3, the transcluded scope is now a child of the directive's isolate scope – they are no longer siblings. So to get from the transcluded scope to the isolate scope, use $parent.
通过NG-重复，每个项目还创造了transcluded范围的子范围：
With ng-repeat, each item still creates a child scope of the transcluded scope:
但去的方法动作（）在从NG-重复子范围分离范围的定义，我们现在使用
But to get to method action() defined on the isolate scope from an ng-repeat child scope, we now use
<div ng-repeat="item in items" ng-click="$parent.$parent.action()">
这篇关于从transcluded内容中的访问指令的范围隔离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
