Question

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

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

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

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

以下是相关代码：

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

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

MainController.$inject['$scope'];

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

示例：Fiddle

Answer 2

想出来，而其他答案与我所寻找的一致，因为我只使用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

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

2 个答案: