Question

我有一个显示为弹出模式的旁边。用户将能够与模态交互并选择两个选项之一。如果用户选择拒绝该优惠，我只想隐藏弹出模式和覆盖。我可以隐藏模态 - ng-show完美无缺。但是，叠加（它是一个单独的元素，位于代码库中的一个单独的部分）不尊重更新的范围值，即使它们使用相同的指令并且值来自单例。如何确保它们同步？
这是模态

    <aside data-ng-show="!customerRejectedOffer" data-pi-browser-update class="md-modal md-show pi-modal-message modal-effect-2">
<div class="pi-modal-content">
    <h4>Title</h4>
                <div>
                    <p>Copy</p>
                    <ul class="flush--left nav--no-style-type">
                        <li>
                        <button class="pi-modal-content-button wb-btn wb-btn--secondary">
                            <a class="pi-modal-content-link" href="#" title="Upgrade Button">
                            <admin:keyvalues key="datedbrowser.iebutton"/></a>  
                        </button>
                        </li>
                        <li><button class="pi-modal-content-button pi-modal-content-button__refusal" data-ng-click="rejectOffer()"><a class="pi-modal-content-link" title=""></a></button></li>
                    </ul>
                    <button data-ng-click="rejectOffer()" class="pi-modal-content-close md-close">X</button>
                </div>
            </div>
</aside>

要管理显示/隐藏值以及处理点击事件，我已设置指令。

(function() {

  'use strict';


  angular
    .module('pi.common.browserupdateMessage', ['pi.common.storage'])
    .directive('piBrowserUpdate', browserUpdate);

  function browserUpdate(SharedScopeUtility) {

    return {
      link: browserUpdateLink
    };

    function browserUpdateLink(scope) {
      scope.customerRejectedOffer = SharedScopeUtility.hasAcceptedUpgrade;
      console.log(scope);
      scope.customerRejectedOffer = customerRejectedOffer;

       function rejectOffer()() {
        SharedScopeUtility.hasAcceptedUpgrade = true;
        scope.customerRejectedOffer = SharedScopeUtility.hasAcceptedUpgrade;
      }

    }

  }

}());

正如您在指令中看到的那样，我从我创建的名为customerRejectedOffer的服务中设置SharedScopeUtility的初始值。

(function() {

  'use strict';

  angular.module('pi.app.sharedscopeutility', [
    'ngResource'
  ])

  .factory('SharedScopeUtility', function (){

    var hasAcceptedUpgrade = false;
    var _service = {
      hasAcceptedUpgrade: hasAcceptedUpgrade
    };

    return _service;
  });

}());

当用户点击“拒绝的提议按钮”时，我会关闭您在指令中看到的rejectOffer()功能。
此函数将服务上的值从false更新为true，并在名为customerRejectedOffer的范围上设置一个新值，然后我在ng-show中使用该值。这适用于弹出模式。
但是，叠加元素：

<div data-pi-browser-update data-ng-click="rejectOffer()" data-ng-show="!customerRejectedOffer" class="pi-modal-overlay"></div>

使用完全相同的指令以及ng-show 的值，但仍然可见。我为此创建了一个服务，因为我希望rejectedOffer布尔值来自一个单例，但是这仍然不会让我感到高兴。请帮助： - ）

Answer 1

最重要的是，Have a look at this plunker。 data-ng-show应直接监听SharedScopeUtility.hasAcceptedUpgrade服务标志。引用范围上的SharedScopeUtility服务 - scope.SharedScopeUtility = SharedScopeUtility。
你在这里回来一个空功能 - 这是一个错误吗？： function rejectOffer()()
rejectOffer()也应在范围上定义 - scope.rejectOffer = function(){}
我见过指令需要$timeout传播范围更改的情况 - 但您可以通过引用上面建议的服务来避免这种情况。

祝你好运，如果有帮助，请告诉我！

跨指令的两个实例更新范围值

1 个答案: