javascript - AngularJS : Hide popup from child controller (popup content)

Question

我的指令有问题。如果我从弹出 Controller 调用 $scope.popup.show = false 行，它就可以正常工作。如果我从子 contentDirective 调用 $scope.hideModal() ，则会调用代码(在调试中检查)，但 $scope.popup.show > 值不会改变(在调试中该值为“false”)并且弹出窗口不会隐藏:/。

你有什么想法吗？ :)

index.html:

<popup title="sometitle">
  <contentDirective> </contentDirective>
</popup>

popup.html:

<div ng-show="popup.show">
    <div ng-transclude></div>
</div>

popup.js

.directive(....
    return {....
        scope: {}
    }
})
.controller(....
    $scope.hideModal = function()
    {
        $scope.popup.show = false;
    }
}]);

contentDirective.htlm(非隔离范围)

<div>
    <button onclick="changeSomethingAndHide()"/>
</div>

contentDirective.js

.controller(....
    $scope.changeSomethingAndHide = function()
    {
        //calls the parent function
        $scope.hideModal();
    }
}]);

也许我错过了什么..

谢谢!

Answer 1

当您处理嵌入的内容时，范围会变得有点棘手。

默认情况下，嵌入的作用域不会被继承(您可以更改它)，它是封闭指令的“同级”作用域，这有点令人困惑，但这是有充分理由的。

因此，默认情况下，您的 contentDirective 实际上看不到弹出指令中的任何内容。当您在 hideModal() 函数中设置 $scope.popup.show = false 时，它​​所做的只是在 contentDirective 的范围中设置一个新变量，而不是在弹出窗口的范围中设置变量。

解决这个问题的两个选项:

1. 您可以手动嵌入 contentDirective 并让它使用与弹出指令相同的范围。请参阅http://angular-tips.com/blog/2014/03/transclusion-and-scopes/了解更多详情。

2. 您可以使用 require 关键字声明 contentDirective，表明您想要访问弹出指令的 Controller 。这将被传递到您的链接函数中，您可以使用该函数来调用弹出指令 Controller 上的方法。请参阅https://egghead.io/lessons/angularjs-directive-to-directive-communication了解更多详情。