AngularJS:隐藏子控制器的弹出窗口(弹出内容）

AngularJS : Hide popup from child controller (popup content)

本文关键字：窗口 控制器 AngularJS 隐藏      更新时间：2023-09-26

我的指令有问题。如果我从弹出式控制器调用线路$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();
    }
}]);

也许我错过了什么。。

谢谢！

当您处理transcluded内容时，作用域会变得有点棘手。

默认情况下，Transcluded作用域不是继承的（您可以更改这一点），它是封闭指令的"兄弟"作用域，这有点令人困惑，但这是有充分理由的。

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

有两种解决方案：

  1. 您可以手动transclude contentDirective，并使其使用与弹出指令相同的范围。看见http://angular-tips.com/blog/2014/03/transclusion-and-scopes/了解更多详细信息。

  2. 您可以使用require关键字声明contentDirective，该关键字指示您希望访问弹出指令的控制器。这将被传递到你的链接函数中，你可以用它来调用弹出指令控制器上的方法。看见https://egghead.io/lessons/angularjs-directive-to-directive-communication了解更多详细信息。

相关文章：