javascript - Angular Js ng-click 没有触发？

Question

我在让 ng-click 在我的 Angular 应用程序中触发时遇到了最奇怪的问题。

这是我正在处理的事情:

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

这是基本 Controller :

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

    }]);
})();

通过此设置，我期望发生的情况是，perks 弹出 div 将显示，当我单击其背景或弹出关闭 div 时，它会被 ngIf 删除。好吧，它显示得很好，但单击关闭或背景没有任何反应。我什至在变量上添加了 $rootScope.$watch 以查看它是否发生变化，但我什么也没得到。看来 ng click 事件根本没有触发。我有什么遗漏的吗？

Answer 1

Don't pollute $rootScope its bad pattern, do use service/factory while you wanted to share data between various component.

ng-if 确实在该元素值数据类型上创建了一个原型(prototype)继承的子范围，将无法获得该 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>

Controller

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