javascript - 当广播被捕获时设置指令

标签 javascript angularjs

我想知道当后端的事件发生false时如何调用指令...

这是我捕获事件的地方

  .factory('AuthInterceptor', function($q, $injector, $rootScope) {
    return {
      response: function(response) {
        if (response.data.lineStatus) {
          $rootScope.$broadcast('line:lineStatus', response.data.lineStatus);
        }
        return response;
      }
    });

那么我在这里收听广播

.factory('BetSlipFactory', function($rootScope) {
 var processingLineMoves = false;

 $rootScope.$on('line:lineStatus', function(ev, status) {
  status.selections = _.map(status.selections, function(selection) {
    selection.display = false;
    return selection;
  });
  if (!status.linesOK) {
    if (!processingLineMoves) {
      processingLineMoves = true;
      $rootScope.linesMovedModal = $popover(angular.element('#linesMovedModal'), {
        template: 'views/linesMovedModal.html',
        html: true,
        autoClose: false,
        placement: 'left',
        trigger: 'manual',
        animation: 'fx-fade-down',
        scope: _.assign($rootScope.$new(), status, {
          okPicks: function(selection, selections, index) {
            if (selections[index + 1] || selections.length > 1) {
              $rootScope.betLoader = true;
              selections.splice(index, 1);
              $rootScope.betLoader = false;
            }else {
              $rootScope.linesMovedModal.hide();
              processingLineMoves = false;
              selections.splice(index, 1);
            }
          },
          removePick: function(selection, selections, index) {
            console.log('selections', selections);
            betSlipSelectionRequest('/betSlip/removeSelection', {
              game: selection.game,
              pair: selection.pair,
              line: selection.line
            }).then(function() {
              selections.splice(index, 1);
              $rootScope.$broadcast('lines:removeAllLines');
              if (selections[index + 1] || selections.length > 1) {
                $rootScope.betLoader = true;
                $rootScope.betLoader = false;
              }else {
                $rootScope.linesMovedModal.hide();
                processingLineMoves = false;
              }
            }, function(err) {
              console.log(err);
            });
          }
        })
      });
      $timeout(function() {
        $rootScope.linesMovedModal.show();
      }, 800);
    }
  }
 });

});

基本上,$rootScope.$on 是我需要放入指令中的部分。我需要的是启动一个显示一些信息的弹出窗口,该弹出窗口从此 $rootScope 变量开始: $rootScope.linesMovedModal

我应该将其放入指令的主要原因是因为我在这里使用 DOM $popover(angular.element('#linesMovedModal')

以防万一this is the popover component I am using

最佳答案

.directive('newDirective', function($rootScope, $popover, $timeout, BetSlipFactory) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var processingLineMoves = false;
      scope.$on('line:lineStatus', function(ev, status) {
        status.selections = _.map(status.selections, function(selection) {
          selection.display = false;
          return selection;
        });
        if (!status.linesOK) {
          if (!processingLineMoves) {
            processingLineMoves = true;
            scope.linesMovedModal = $popover(element, {
              template: 'views/linesMovedModal.html',
              html: true,
              autoClose: false,
              placement: 'bottom',
              trigger: 'manual',
              animation: 'fx-fade-down',
              scope: _.assign(scope.$new(), status, {
                okPicks: function(selection, selections, index) {
                  if (selections[index + 1] || selections.length > 1) {
                    scope.betLoader = true;
                    selections.splice(index, 1);
                    $timeout(function() {scope.betLoader = false;}, 100);
                  }else {
                    scope.linesMovedModal.hide();
                    processingLineMoves = false;
                    selections.splice(index, 1);
                  }
                },
                removePick: function(selection, selections, index) {

              //HERE YOU NEED TO CREATE NEW FN IN THE SERVICE, OTHERWISE
              //YOU WILL GET AN ERROR LIKE:
              //betSlipSelectionRequest is not define ** 
                  CreateFnOnService(selection).then(function() {
                    $rootScope.$broadcast('lines:removeAllLines');
                    if (selections[index + 1] || selections.length > 1) {
                      selections.splice(index, 1);
                      $rootScope.betLoader = true;
                      $timeout(function() {scope.betLoader = false;}, 100);
                    }else {
                      $rootScope.linesMovedModal.hide();
                      processingLineMoves = false;
                      selections.splice(index, 1);
                    }
                  }, function(err) {
                    console.log(err);
                  });
                }
              })
            });
            $timeout(function() {
              scope.linesMovedModal.show();
            }, 200);
          }
        }
      });
    }
  };
});

就是这样。尝试一下并告诉我

关于javascript - 当广播被捕获时设置指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31346200/

相关文章:

javascript - 如何验证输入数字字段的小数点?

javascript - Angular 2 : Component doesn't render

javascript - 如何将 CSS 文件导入到 webpack 中?

javascript - 在 Ember.js 中,当您手动声明 View 及其相应的 Controller 时,是否存在将其范围限定为当前应用程序状态的概念?

angularjs - 变量 'Foo' 在声明之前使用。两个类(Class)相互依存

angularjs - 如何/何时使用 ng-click 来调用路线?

javascript - 意外 token 导出 firebase-app.js :1590

javascript - Node js 需要使用变量 (var) 的 json

javascript - 在 AngularJS 路由中使用常量

javascript - 使用angularjs根据标题的高度更改顶部填充