【问题标题】:Drag and drop Angular 1.x directive/component and parent scope拖放 Angular 1.x 指令/组件和父范围
【发布时间】:2016-11-10 06:42:50
【问题描述】:

假设我的祖父组件/指令的作用域变量是这样声明的:$scope.g = { // methods here };

在我的每个嵌套组件/指令的控制器中,我指的是像$scope.$parent.$parent.g 这样的变量,然后从g 调用一些函数,例如$scope.fromNgClick = function() { $scope.$parent.$parent.g.run(); };。这很好用(尽管我想要一种更好的方式来指代祖先,例如别名?而不是 $parent 链)。

当我将一个组件从它的祖父组件本地拖到另一个祖父兄弟组件中时(明白吗?),相同的$scope.fromNgClick = function() { $scope.$parent.$parent.g.run(); }; 仍然指向原始范围,而不是我需要的新范围。所以点击同一个 ng-clickable 元素仍然会在前一个祖父的作用域上触发 run() 方法。

这一切都说得通;但是,有没有办法让范围指向新的删除位置祖父范围?

谢谢!

编辑
标记将类似于以下内容,其中<g-directive> 被视为祖父母,因为它在其模板上使用transclude,最终包装了子指令:

<g-directive>
    <child-directive></child-directive>
    <another-child-directive></another-child-directive>
    <yet-another-child-directive></yet-another-child-directive>
</g-directive>
<g-directive>
    <c-child-directive></c-child-directive>
    <c-another-child-directive></c-another-child-directive>
    <c-yet-another-child-directive></c-yet-another-child-directive>
</g-directive>

这就是子指令/组件上 $scope.$parent.$parent.g 的原因。

一个子组件可以被拖放到另一个&lt;g-directive&gt;,但它的控制器仍然指向它的原始祖父(原始&lt;g-directive&gt;的控制器范围变量)。我希望它指向新的祖父母被放入,基本上将其范围重置为新放置的范围。

【问题讨论】:

  • 如果你想看看这个:stackoverflow.com/questions/11252780/… 不知道为什么你需要在当前范围内给这么多父母打电话。
  • @maddog 我认为这对其他一些情况很有帮助,但我不知道这将如何解决孩子对新祖父母的范围引用。
  • 您可以通过emitbroadcast 调用其他控制器。并使用共享服务或$rootScope 变量共享数据。
  • @maddog 在这种情况下,即使发出伪事件来调用方法,如果所有 实例都在监视,我如何区分需要调用哪个 同一个事件?这些都是动态的。我可以有任意数量的 和任意数量的嵌套指令/组件,而这些嵌套组件只需要触发它们的 current 的方法,无论哪个在那一刻他们已经被移动/投入。即使传入数据也不会让我知道哪个父级是当前父级,因为它们可以从任何地方开始。 ://
  • 我认为这可能会解决您的问题(scope.emit):stackoverflow.com/questions/26752030/…

标签: angularjs angularjs-directive angularjs-scope angularjs-components


【解决方案1】:
<g-directive some-attr=1>
 <child-directive></child-directive some-attr=1>
 <another-child-directive></another-child-directive some-attr=1>
 <yet-another-child-directive></yet-another-child-directive some-attr=1>
</g-directive>

<g-directive some-attr=2>
 <child-directive></child-directive some-attr=2>
 <another-child-directive></another-child-directive some-attr=2>
 <yet-another-child-directive></yet-another-child-directive some-attr=2>
</g-directive>

每个broadcastemit 可以有不同的侦听器。

如果指令通过ng-repeat 重复,那么$index 可以是该属性。 希望这可以帮助。

【讨论】:

  • 感谢昨天的详细信息。我没有解决这个问题,而是设法更改了包装组件的结构,以解决我最初分配给嵌套组件的一些功能,这对于我的用例来说效果很好。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-07-12
  • 1970-01-01
  • 2016-05-01
  • 2019-04-24
  • 2017-05-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多