Question

我已经创建了一个指令，它的行为就像你点击按钮它会显示微调器或加载器，它的show用户正在进行像API调用或移动到另一个页面，我面临以下问题：

如果页面上使用了多个指令，则显示两个按钮的显示微调器而不是单击按钮，我希望它只显示单击的按钮
在某些情况下，单击事件绑定三次，因为在按钮内部使用三个跨度来显示微调器，事件传播存在一些问题

这是指令代码：

(function () {
    'use strict';

    angular
        .module('app.base')
        .directive('buttonSpinner', directiveFunction)
        .controller('btnController', ControllerFunction);


    // ----- directiveFunction -----
    directiveFunction.$inject = [];

    /* @ngInject */
    function directiveFunction() {

        var directive = {
            restrict: 'E',
            scope: {
              label: "@",
              available: "="
            },
            controller: 'btnController',
            controllerAs: 'vm',
            replace: true,
            transclude: true,
            template:
              '<button ng-disabled="vm.isDisabled">'
                + '<span ng-hide="vm.isClicked">{{label}}</span>'
                + '<div class="spinner" ng-show="vm.isClicked">'
                +   '<span class="bounce1"></span>'
                +   '<span class="bounce2"></span>'
                +   '<span class="bounce3"></span>'
                + '</div>' +
              '</button>'
        };

        return directive;
    }

    // ----- ControllerFunction -----
    ControllerFunction.$inject = [ '$scope' ];

    /* @ngInject */
    function ControllerFunction( $scope ) {

        var vm = this;
        vm.isClicked = false;
        $scope.$on('APICALLED', function(event, data){
          vm.isClicked = data.done;
          if( data.elem ) {
            angular.element(document.getElementById(data.elem))[0].disabled = true;
          } else {
            vm.isDisabled = data.disable;
          }
        });
    }

})();

使用方法：

在视图中

<button-spinner class="btn btn-primary btn-block btn-lg" type="submit" ng-click="vm.notifyMe($event)" label="Notify Me" available="vm.notify.is" id="notifyMeBtn"></button-spinner>

在控制器中：

显示微调器：

$rootScope.$broadcast('APICALLED', {'done': true, 'disable': true});

隐藏微调器：

 $rootScope.$broadcast('APICALLED', {'done': false, 'disable': false});

Answer 1

您的问题与您的Tab有关，因此存在模式问题。 $broadcast's根本不是一个好的解决方案。例如）您需要手动销毁$rootScope.$broadcast()绑定。只需将唯一的范围var解析为指令$rootScope.$broadcast.$on()。对于每个加载过程，此范围参数可由控制器本身处理：

loading

视图

/* @ngInject */
function directiveFunction() {

    var directive = {
        restrict: 'E',
        scope: {
            label: "@",
            available: "=",
            loading: "="
        },
        controller: 'btnController',
        controllerAs: 'vm',
        replace: true,
        transclude: true,
        template:
        '<button ng-disabled="vm.isDisabled">'
        + '<span ng-hide="vm.isClicked">{{label}}</span>'
        + '<div class="spinner" ng-show="vm.loading">'
        +   '<span class="bounce1"></span>'
        +   '<span class="bounce2"></span>'
        +   '<span class="bounce3"></span>'
        + '</div>' +
        '</button>'
    };

    return directive;
}

角度指令：按钮微调器

1 个答案:

视图