角Js ng單擊不觸發？

Question

嘿，我遇到的最奇怪的問題是在Angular應用中觸發ng-click。

這是我要處理的內容：

<div class="popup" id="perks-popup" ng-if="perksPopup === true">

    <div class="popup-bkg" ng-click="perksPopup = false;"></div>

    <div class="popup-content">
        <div class="popup-close" ng-click="perksPopup = false;">

            <img class="scalableImg" src="img/icons/close-blue.png" alt="">

        </div>
    </div>

</div>

這是基本控制器：

(function(){

    "use strict";

    Caribou2015.controller('BaseController', ['$rootScope', '$scope', 'Dates', function($rootScope, $scope, Dates){
        console.log('base controller init');

        //overlay and popup states
        $rootScope.welcomePopup = false;
        $rootScope.perksPopup = true;
        $rootScope.calPopup = false;


    }]);
})();

使用此設置，我希望發生的事情是會彈出特權彈出div，當我單擊其背景或彈出關閉div時，它會被ngIf刪除。 很好，它顯示得很好，但是單擊關閉或背景卻無濟於事。 我什至在變量上添加了$ rootScope。$ watch來查看它是否更改，但我什么也沒得到。 似乎ng click事件根本沒有觸發。 有什么我想念的嗎？

任何幫助將是非常感謝！

-Kobby

Answer 1

不要污染$rootScope的錯誤模式，當您想在各個組件之間共享數據時，請使用service/factory 。

ng-if確實在該元素值數據類型上創建了原型繼承的子范圍，不會在該div填充該值，您需要添加$parent. 訪問范圍變量，然后在使用范圍變量ng-if這引起問題時，您需要在聲明模型時遵循點規則，假設范圍中的$scope.model={}然后分配所有屬性並在html上使用它。

標記

<div class="popup" id="perks-popup" ng-if="model.perksPopup === true">

    <div class="popup-bkg" ng-click="model.perksPopup = false;"></div>

    <div class="popup-content">
        <div class="popup-close" ng-click="model.perksPopup = false;">

            <img class="scalableImg" src="img/icons/close-blue.png" alt="">

        </div>
    </div>

</div>

調節器

$scope.model = {};
$scope.model.perksPopup = true;