Access指令的隔离范围来自已转换的内容

时间:2013-04-23 14:28:00

标签: javascript html5 angularjs angularjs-directive angularjs-scope

我不确定这是否真的可行,但我基本上想要反过来'&'隔离AngularJS中的范围。这是一个Plunkr来演示。

基本上,我有一个自定义指令设置,可以提供一些可重复使用的HTML。它利用ng-transclude允许在其中呈现一些外部内容。但是,我发现了一种情况,我希望在代码的被转换部分中访问已在指令的隔离范围上设置的函数。

所以基本上我有一些看起来像:

<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>

有谁知道这确实可能吗?

更新

根据@Mark Rajcok的回答,$$prevSibling上找到的$scope可用于从被抄送的内容中访问指令的隔离范围。但是,我已经更新了上面的Plunkr,以便在ng-repeat指令中尝试这一点,但该指令不起作用。我假设重复内的项目不继承范围。

3 个答案:

答案 0 :(得分:20)

尽管可能,我提出的解决方案是一个黑客,因为它使用范围内部变量$$prevSibling

在您的已转换内容中,您处于被抄送的范围内。该指令的隔离和转换范围是兄弟姐妹。要从transcluded范围获取隔离范围,您可以使用$$prevSibling。 (要从隔离范围到转换范围,可以使用$$nextSibling。)

所以,这个黑客会起作用:

<a href="" ng-click="$$prevSibling.action()">Invoke the Directive Action</a>

要在控制器范围上调用方法,您需要使用&指定已经演示的@ganaraj:

<content-presenter controller-action="action()">

然后在你的指令中:

scope: { controllerAction: '&' },
template: ... +
   '<button ng-click="controllerAction()">Trigger Ctrl action()</button>' ...

Plunker


使用ng-repeat(参见Samuel的评论),每个项目都会创建一个包含范围的子范围。在下图中,我只显示了一个item以使图片更小。反转$$ prevSibling的$$ nextSibling棕色箭头。

enter image description here

因此,从ng-repeat子范围到隔离范围定义的方法action()的hack是

<div ng-repeat="item in items" ng-click="$parent.$$prevSibling.action()">

更新Angular v1.3 +

自Angular v1.3起,transcluded范围现在是指令的隔离范围的子代 - 它们不再是兄弟。因此,要从transcluded范围到隔离范围,请使用$parent

使用ng-repeat,每个项目仍然会创建转换范围的子范围:

enter image description here

但是要从ng-repeat子范围获取隔离范围上定义的方法action(),我们现在使用

<div ng-repeat="item in items" ng-click="$parent.$parent.action()">

答案 1 :(得分:1)

这是一个解决您当前问题的插件。我不确定你要做什么。但据我所知,没有办法在隔离范围内调用外部范围内的东西。当然,您可以在隔离范围和外部范围之间设置双向绑定变量,更改外部范围中的变量,并在隔离范围上监视它(这将像事件机制一样工作)...这是一个做你想做的事情的方式..如果你坚持的话。

或者,有一种机制可以从隔离范围调用外部作用域上的函数。它有点像回调。

请参阅此http://plnkr.co/edit/5MT4vo9qXtV6nQikfEiH?p=preview

答案 2 :(得分:1)

我的理解是,向元素添加ng-repeat会创建一个新范围,以便正确绑定重复内容。您可能需要该链中的其他$parent,例如$parent.$$nextSibling,以便升级到与指令的隔离范围相邻的级别。