Question

在我的代码中，我有两个指令。一个在控制器范围内，另一个不在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/

Answer 1

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

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

希望这会有所帮助。您也可以阅读此article

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

1 个答案: