通過指令的兩個實例更新範圍值

我有一個旁邊，它將顯示爲彈出式模式。用戶將能夠與模態進行交互並選擇其中一個選項。如果用戶選擇拒絕報價，我只想隱藏彈出式模式和覆蓋圖。我可以隱藏模式 - ng顯示完美的作品。但是，覆蓋（它是一個單獨的元素，坐在代碼庫中的獨立部分中）不考慮更新的範圍值，即使它們使用相同的指令並且值來自單例。我如何確保它們同步？
這裏的模式通過指令的兩個實例更新範圍值

<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>

要管理的顯示/隱藏值以及處理我已經設置了指令click事件。

(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; 
     } 

    } 

    } 

}());

正如你可以在指令中看到的，我從我創建了名爲SharedScopeUtility服務設置的customerRejectedOffer初始值。

(function() { 

    'use strict'; 

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

    .factory('SharedScopeUtility', function(){ 

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

    return _service; 
    }); 

}());

當用戶點擊「拒絕Offer按鈕」我關火rejectOffer()功能，你可以在指令中看到。
此函數將服務的值從false更新爲true，並在名爲customerRejectedOffer的作用域上設置一個新值，然後在我的ng顯示中使用該值。這對於彈出式模式很有效。
然而，覆蓋的元素：

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

它使用完全相同的指令，以及價值它的NG-顯示但仍然可見。我爲此創建了一項服務，因爲我希望rejectedOffer布爾值來自單身人士，但是這仍然沒有給我帶來任何喜悅。幫助，請:-)

來源

2017-07-19 Antonio Vasilev

最重要的是，Have a look at this plunker。 data-ng-show應直接監聽SharedScopeUtility.hasAcceptedUpgrade服務標誌。參考範圍SharedScopeUtility服務 - scope.SharedScopeUtility = SharedScopeUtility。
傻冒這裏返回一個空的功能 - 它是一個錯誤？： function rejectOffer()()
rejectOffer()也應在範圍界定 - scope.rejectOffer = function(){}
我見過的情況下，指令需要$timeout傳播範圍變更 - 但你可以通過參考上面建議的服務來避免這種情況。

祝你好運，讓我知道如果這有幫助！

來源

2017-07-19 17:42:42 DotBot

通過指令的兩個實例更新範圍值

回答

相關問題