Javascript 如何实现以同步方式工作的emit

我试图在页面加载期间使用angular$emit和命令文件显示微调器。我的模型是：

Model:

    model.load = function(){
        model.loading = true;
        $rootScope.$emit('loadMyPage', model.loading);
        return service.getData().then(storesResult, storesFault);
    }


       var storesResult = function (value) {
        model.categoriesLoading = false;
        $rootScope.$emit('loadMyPage', model.loading);
        model.stores = value.result;
        saveData();
    };

    var storesFault = function (value) {
        var data = value.data;
        var status = value.status;
        model.categoriesLoading = false;
        model.stores = null;
        $rootScope.$emit('loadMyPage', model.loading);
        $rootScope.$emit('systemAlert', {title: 'Loading Error', message: data, status: status, type: 'danger', timeout: 10000, showAsModal: true});
        return value;
    };

在app.run中执行的我的命令文件

command.execute = function () {
            $rootScope.$on('loadMyPage', onLoadingChange);
        };

        var onLoadingChange = function (event, value) {
            if (model.loading === true) {
                showModal('sections/modals/loading/loading.tpl.html');
            } else {
                hideModal();
            }
        };
};

问题是在页面加载期间，$emit from model.load没有转到$on in命令。调用$on时，它是从storesResult块完成的。因此，model.load总是变为false。这可能是一个异步问题

---

欢迎所有建议。

可能不要使用$emit和$on。如果您有$rootscope对象，只需使用您的键值对或任何您想要检查的数据创建一个键。您的数据可能如您所期望的那样存在，或者使用$watch等待它，或者只使用带有$rootscope的回调

Model:

    model.load = function(){
      // model.loading = true;
      $rootScope.isLoading = true;
      return service.getData().then(storesResult, storesFault);
    }


    var storesResult = function (value) {
      model.categoriesLoading = false;
      $rootScope.isLoading = true;
      model.stores = value.result;
      saveData();
    };

    var storesFault = function (value) {
      var data = value.data;
      var status = value.status;
      model.categoriesLoading = false;
      model.stores = null;
      $rootScope.isLoading = true;
      $rootScope.$emit('systemAlert', {title: 'Loading Error', message: data, status: status, type: 'danger', timeout: 10000, showAsModal: true});
    return value;
};

command.execute = function () {
        $rootScope.$watch('isLoading', onLoadingChange);
    };

    var onLoadingChange = function ( value ){
        if (value === true) {
        // or simply if( value )
            showModal('sections/modals/loading/loading.tpl.html');
        } else {
            hideModal();
        }
    };
};

但是

也许$rootScope不是使用属性进行污染的最佳方案。这件事由你决定

同时

有关$emit和$broadcast的快速帮助

控制器被实例化，其中$scope DI'd=> （不是单身人士）

这就是广播和发射的工作原理。注意下面的节点；全部嵌套在节点3中。在这种情况下，可以使用广播和发射

                   3
               --------
              |        |
             ---     ----
            1   |    2   |
          ---  ---  --- ---
          |  | |  | | | | |

看看这棵树。你如何回答以下问题？ 注意：还有其他方法，但这里我们将讨论广播和发射。 另外，在阅读下面的文本时，假设每个数字都有自己的文件（指令、控制器）e.x.one.js、two.js、three.js

1如何与3对话

在文件one.js中

scope.$emit('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

在文件3.js中

scope.$on('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$broadcast('messageThree', someValue(s));

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

We already handled this one remember?

2如何与3对话

在文件two.js中

scope.$emit('messageTwo', someValue(s));

scope.$emit('messageTwo', someValue(s));

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){
  return { name: 'talkToOne', data: [1,2,3] };
}

在文件3.js中

scope.$on('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$broadcast('messageThree', someValue(s));

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

We already handled this one remember?

3如何与1和/或2对话

在文件3.js中

scope.$on('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$broadcast('messageThree', someValue(s));

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

We already handled this one remember?

在文件one.js&&two.js中，选择要捕获消息的文件

scope.$on('messageThree', someValue(s));

2如何与1对话

在文件two.js中

scope.$emit('messageTwo', someValue(s));

scope.$emit('messageTwo', someValue(s));

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){
  return { name: 'talkToOne', data: [1,2,3] };
}

在文件3.js中

scope.$on('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$broadcast('messageThree', someValue(s));

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

We already handled this one remember?

在文件one.js中

scope.$emit('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

但是

当所有这些嵌套的子节点都尝试这样通信时，您将很快看到许多$on的$broadcast和$emit。这是我喜欢做的事

父节点中的（本例中为三个…）

因此，在文件three.js中

scope.$on('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$broadcast('messageThree', someValue(s));

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

We already handled this one remember?

现在，在任何子节点中，您只需$emit消息或使用$on捕捉消息

scope.$on('messageThree', someValue(s));

注意：通常很容易在一个嵌套路径中进行串扰，而不使用$emit、$broadcast或$on，这意味着大多数用例都适用于试图让1与2进行通信的情况，反之亦然

2如何与1对话

在文件two.js中

scope.$emit('messageTwo', someValue(s));

scope.$emit('messageTwo', someValue(s));

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){
  return { name: 'talkToOne', data: [1,2,3] };
}

在文件3.js中

scope.$on('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$broadcast('messageThree', someValue(s));

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

We already handled this one remember?

在文件one.js中

scope.$emit('messageOne', someValue(s));

scope.$on('messageTwo', someValue(s));

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

对于要捕获的每个特定值，您仍然需要使用$on，但现在您可以在任何节点中创建任何您喜欢的内容，而无需担心如何跨父间隙获取消息

scope.$on('messageThree', someValue(s));

---

希望这有帮助……

您尝试过$broadcast吗？我尝试过broadcast，但行为非常相似。控件转到load方法，然后不将控件转移到$on，而是转到storesResult，然后控件转移到$on。