为什么我的角度控制器中的事件不会多次触发？

Question

我正在尝试在一个组件中设置 angulartics，该组件用于在横幅中向用户显示错误/重要信息。但是，我遇到了一个问题，尽管横幅按预期运行，但控制器内部的值似乎没有按预期更新或运行。

发生了什么：ctrl.isBannerVisible 在测试页面加载时被定义为 true，触发横幅，但在切换可见性时值不会更新，尽管横幅实际上消失并重新出现。尽管被多次打开和关闭，“横幅可见”在控制台中只打印一次。

预期内容：每次ctrl.isBannerVisible 被评估为 true 时，都应在控制台中打印“横幅可见”。

有人可以解释为什么会这样吗？

下面是相关代码：

core.component.js：

(function () {
    'use strict';

    /** @ngInject */
    function bannerCtrl($scope, $analytics) {
        var ctrl = this;
        ctrl.showCloseIcon = false;

        if (angular.isDefined(ctrl.hasCloseIcon)) {
            ctrl.showCloseIcon = true;
        }

        ctrl.bannerStyle = ctrl.bannerStyle || 'alert';

        ctrl.$onDestroy = function () {
            if (ctrl.onClosed) {
                ctrl.onClosed();
            }
        }

        $scope.$watch('isBannerVisible',
            function(previousValue, currentValue) {
                if(currentValue){
                    console.log('Banner is visible');
                }
            }
        );

        ctrl.onCloseClicked = function() {
            ctrl.isBannerVisible = false;
            if (ctrl.onClosed) {
                ctrl.onClosed();
            }
        }
    }

    var BannerComponent = {
        templateUrl: 'components/core/banner.tpl.html'
        , transclude: true
        , controller: bannerCtrl
        , bindings: {
            // Use 'has-close-icon' attribute (no values necessary) to display the close icon.
            iconName: '@?'
            , hasCloseIcon: '@?'
            , bannerStyle: '@?'
            , isBannerVisible: '='
            , onClosed: '&?'
        }
    };

    angular.module('mi.banner.core').component('miBanner', BannerComponent);

    BannerComponent.$inject = [
        '$scope', '$analytics'
    ];
}());

模板：

<div layout="row" layout-align="start center">
    <div flex="100" ng-class="'mi-uam-banner--' + $ctrl.bannerStyle" ng-if="$ctrl.isBannerVisible">
        <div flex="none" class="mi-icat-icon">
            <div class="{{$ctrl.iconName}}"></div>
        </div>
        <div flex="grow" class="mi-icat-content" ng-transclude></div>
        <div layout layout-align="center center" flex="none" class="mi-icat-action" ng-if="$ctrl.showCloseIcon">
            <a class="mi-icon-action-close" ng-click="$ctrl.onCloseClicked()"></a>
        </div>
    </div>
</div>

示例实现：

<button id="toggleBannerVisibility" ng-click="main.toggleBannerVisibility()">Toggle banner visibility</button>
<mi-banner banner-style="global" icon-name="mi-icon-add-filled-circle" has-close-icon is-banner-visible="main.isBannerVisible">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <p>
        <a id="asdf" href="" ng-click="main.wow()">RETRY</a>
    </p>
</mi-banner>

测试控制器：

(function () {
    'use strict';

    /** @ngInject */
    function MainController() {
        var ctrl = this;
        ctrl.isBannerVisible = true;
        ctrl.destroyed = false;

        function toggleBannerVisibility() {
            ctrl.isBannerVisible = !ctrl.isBannerVisible;
        }

        function wow() {
            window.alert('WOW!');
        }

        ctrl.wow = wow;
        ctrl.toggleBannerVisibility = toggleBannerVisibility;
    }

    angular
      .module('mi.banner.test-page')
      .controller('MainController', MainController);
}());

注意：我已经删除了 $analytics 事件跟踪代码，因为它对于我所面临的问题实际上并不是必需的。

Answer 1

想通了，而其他答案与我正在寻找的答案很接近，因为我只使用controller 级别变量，$scope 没有$watch 访问isBannerVisible。我必须使用：

$scope.$watch(function() { return ctrl.isBannerVisible },
            function(currentValue, previousValue) {
                if(currentValue){
                    console.log('Banner is visible');
                }
            }
        );

答案的链接向我展示了这一点：

https://stackoverflow.com/a/23231762/2925985

Answer 2

你需要使用$watch，为此你需要注入$scope。

MainController.$inject['$scope'];

function MainController($scope){
   $scope.$watch('isBannerVisible', function(){
       //logic goes here
   });
}

示例：Fiddle