AngularJS：從子控制器隱藏彈出（popup內容）

我的指令有問題。如果我從彈出控制器調用行$scope.popup.show = false，它工作正常。如果我從子contentDirective調用$scope.hideModal()，調用該代碼（在調試中檢查），但$scope.popup.show值不變（調試時該值爲「false」），彈出窗口不會隱藏：/。AngularJS：從子控制器隱藏彈出（popup內容）

你有什麼想法嗎？ :)

的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(); 
    } 
}]);

也許我錯過了什麼..

謝謝！

來源

2014-10-16 ogdabou

當你處理橫切內容時，範圍變得有點棘手。

跨行範圍默認情況下不會被繼承（您可以更改此屬性），它是包含指令的「同級」範圍，這有點令人困惑，但有充足的理由。

因此，默認情況下，您的contentDirective實際上無法在您的popup指令中看到任何內容。當您在hideModal（）函數中設置$ scope.popup.show = false時，它所做的就是將一個新變量設置爲contentDirective的作用域，而不是在彈出窗口的作用域中設置該變量。

兩個選項來解決這個問題：

您可以手動transclude contentDirective並將它使用相同的範圍，因爲您的彈出指令。有關更多詳細信息，請參閱http://angular-tips.com/blog/2014/03/transclusion-and-scopes/。
您可以用require關鍵字聲明contentDirective，指出您想要訪問彈出窗口指令的控制器。這將被傳遞給你的鏈接函數，你可以用它來調用popup指令的控制器上的方法。有關更多詳細信息，請參見https://egghead.io/lessons/angularjs-directive-to-directive-communication。

來源

2014-10-16 21:53:18 rchawdry

嗨@rchawdry，謝謝我要挖掘到這些鏈接:)。 – ogdabou 2014-10-17 07:49:52

我在第二個鏈接中使用瞭解決方案：在指令中注入父彈出控制器。但實際上這是我從一開始就在做的事情，我認爲只要調用示波器功能就會更清晰。「這有點令人困惑，但有很好的理由」，我想他們中的一個就是知道函數在哪裏定義，nop？無論如何，謝謝你！ – ogdabou 2014-10-17 08:17:10

AngularJS：從子控制器隱藏彈出（popup內容）

回答

相關問題