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;
      

    }]);
})();

使用此设置，我希望发生的是额外津贴弹出窗口 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 确实在该元素值数据类型上创建了一个原型继承的子范围，该范围不会在 div 中填充值，您需要添加 $parent. 以访问范围变量，在 As you are using scope variable 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;

Angular Js ng-click 没有触发？`

Angular Js ng-click not firing?`

javascript

jquery

angularjs

jquery-events

angularjs-ng-click