Angular Js ng-click 不触发？

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;
      

    }]);
})();

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

Answer 1

不要污染$rootScope 它的坏模式，请使用service/factory 当您想在各个组件之间共享数据时。

ng-if 确实在该元素上创建了一个原型继承的子范围，值数据类型将不会在该div 中填充值，您需要在 As you are using scope 之前添加 $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;