javascript - 在 Controller 范围内使用指令时不保留 $scope

Question

在我的代码中有两个指令。一个在 Controller 范围内，另一个不在 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 没有 Controller 标签在外面，outfit-directive 在 WalletController 标签里面。

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

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

此函数是从其他 JS 文件调用的，但更新后的值仅针对 packgroup 指令显示，而不针对 outfit-directive 显示，但是当我将其从WalletController 标签显示正确的值。

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

Answer 1

问题是您有两个独立的作用域。一个是父级(由 packgroup 使用)，一个是子级(由 WalletController 使用)。因此，为了实现所需的行为，您需要在它们之间共享数据。这可以通过下一个方法来完成:

1. 将您的变量放入 $rootScope 并从子 Controller 的 $rootScope 中获取此变量。 优点:简单； 缺点:污染全局范围不是一个好主意。
2. 使用事件发射方法。在父范围内，处理变量更改并广播该值。子 Controller 将捕获它并更新。 优点:简单； 缺点:直接事件方法使您的应用程序更难调试和维护。 (恕我直言)
3. 使用特殊服务在 Controller 之间共享数据。最常见的方法。 优点:共享数据的清晰方式 缺点:需要更多代码
4. 使用组件并将数据作为参数传递给子 Controller 优点:更清晰的数据共享方式。 缺点:需要有 1.5 的 Angular 和一点时间来返工。
5. 解决方法。将您的变量定义为:$scope.popup = {isOpen:false} 然后尝试在子 Controller 上获取此对象(不是 isOpen 字段)。由于 $scope 的继承，这也可以工作。 优点:简单； 缺点:隐式获取变量会使您的应用更难理解，并可能导致意外错误。

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