在控制器范围内使用指令时不保留$ scope

在我的代码中，我有两个指令。一个在控制器范围内，另一个不在html部分。

<div ng-show="isStore==true"> 
       <packgroup-directive> 
       </packgroup-directive> 
       <div class="lineBreaker" ng-if="groupList.length>0"></div> 
       <div ng-controller="WalletController"> 
        <outfit-directive></outfit-directive> 
        <div class="imageContainer" ng-show="getPurchaseState() == false" ng-click="buyAllOutfit()"> 
         <img class="feature1" ng-src="/app/app_resources/language/en/resources/{{buyAllOutfitBanner}}"/> 
         <div class="buttonBanner">{{allOutfitBannerValue}} 
         <img style="width: 20%" ng-src="/app/app_resources/icons/pep_sign_black.png"></div> 
        </div> 
       </div>

这里packgroup-directive不被外部具有控制器标签和outfit-directive是WalletController标记内。

所以我面临的问题是我有一个变量popupopen，它控制弹出窗口的关闭。在我的控制器我调用此函数从另一个JS文件：

$scope.checkPopup = function(){ 
     if(popupOpen==1 && dialogID!=null){ 
     ngDialog.close(dialogID); 
     ngDialog.close($scope.dialogID); 
     bridge.getPopupState("0"); 
     } 
    }

这个功能是从其他JS文件调用，但更新后的值只显示为packgroup directive而不是为outfit-directive，但是当我从删除WalletController标记它显示正确的值。

代码：https://jsfiddle.net/x1x1ug5y/

来源

2017-11-25 arqam

你可以请添加您的指令和控制器？谢谢 – lin

@lin添加了代码。 – arqam

你小提琴不能运行。请删除这些错误以重现您的问题。 – lin

的问题是，你有两个独立的范围。一个是父（由packgroup使用），另一个是子（由WalletController使用）。因此，为了达到所需的行为，您需要在它们之间共享数据。这可以通过下面的方法完成：

把你的变量放到$ rootScope中，并从子控制器的$ rootScope中获得这个变量。优点：simle; 缺点：污染全球范围是一个坏主意。
使用事件发射方法。在父范围内，处理变量更改并广播此值。子控制器将捕获并更新。优点：简单; 缺点：直接事件方法使您的应用程序更难以调试和维护。（恕我直言）
使用特殊服务在控制器之间共享数据。最常见的方法。优点：清除共享数据的方式缺点：需要更多代码
使用组件并将数据作为参数传递给子控制器优点：更清晰的共享数据的方式。缺点：需要角1.5和一点点时间才能返工。
解决方法。将您的变量定义为：$ scope.popup = {isOpen：false}，然后尝试在子控制器上获取此对象（不是isOpen字段）。由于$范围的继承，这也可以工作。优点：简单; 缺点：获取变量会导致您的应用程序难以理解，并可能导致意外的错误。

希望这会有所帮助。你也可以阅读这个article

来源

2017-11-25 11:42:22 Vitalii

我试过用$ scope.popup = false/true，但是在那种情况下它不起作用。将创建一个对象的帮助？ – arqam

它应该，所以你可以试试看。但我会建议使用这种服务。这会稍后好得多。 – Vitalii

服务如存储在本地存储或正常服务功能？ – arqam

在控制器范围内使用指令时不保留$ scope

回答

相关问题